feat: enable gas source switch only for unshielding and shielded

transfers

Author: mateuszjasiuk

apps/namadillo/src/App/Common/GasFeeModal.tsx

@@ -4,6 +4,7 @@ import {
   Modal,
   Stack,
   StyledSelectBox,
+  Text,
   ToggleButton,
 } from "@namada/components";
 import { chainAssetsMapAtom, nativeTokenAddressAtom } from "atoms/chain";
@@ -95,6 +96,7 @@ export const GasFeeModal = ({
     gasEstimate,
     gasPriceTable,
     gasSource,
+    gasSourceSwitch,
     onChangeGasLimit,
     onChangeGasToken,
     onChangeGasSource,
@@ -168,28 +170,38 @@ export const GasFeeModal = ({
             );
           })}
         </div>
-
+        {gasSourceSwitch && gasSource !== "shielded" && (
+          <Text className="text-red-600 text-sm">
+            Warning! Using fees from your transparent account will reveal data.
+            <br />
+            To keep your data protected we recommend moving assets to the
+            <br />
+            shield pool to pay fees.
+          </Text>
+        )}
         <Stack
           direction="horizontal"
           className="justify-between align-middle mt-4 mb-1"
         >
           <div className="text-sm">Fee Token</div>
-          <ToggleButton
-            label={
-              gasSource === "shielded" ? "Shielded Balance" : (
-                "Transparent Balance"
-              )
-            }
-            color="white"
-            activeColor="yellow"
-            checked={gasSource === "shielded"}
-            onChange={() =>
-              onChangeGasSource(
-                gasSource === "shielded" ? "transparent" : "shielded"
-              )
-            }
-            containerProps={{ className: "gap-3 text-xs" }}
-          />
+          {gasSourceSwitch && (
+            <ToggleButton
+              label={
+                gasSource === "shielded" ? "Shielded Balance" : (
+                  "Transparent Balance"
+                )
+              }
+              color="white"
+              activeColor="yellow"
+              checked={gasSource === "shielded"}
+              onChange={() =>
+                onChangeGasSource(
+                  gasSource === "shielded" ? "transparent" : "shielded"
+                )
+              }
+              containerProps={{ className: "gap-3 text-xs" }}
+            />
+          )}
         </Stack>
         <StyledSelectBox
           id="fee-token-select"

apps/namadillo/src/hooks/useTransactionFee.ts

@@ -18,6 +18,7 @@ export type TransactionFeeProps = {
   gasEstimate: GasEstimate | undefined;
   gasPriceTable: GasPriceTable | undefined;
   gasSource: "shielded" | "transparent";
+  gasSourceSwitch: boolean;
   onChangeGasLimit: (value: BigNumber) => void;
   onChangeGasToken: (value: string) => void;
   onChangeGasSource: (value: "shielded" | "transparent") => void;
@@ -57,12 +58,17 @@ export const useTransactionFee = (txKinds: TxKind[]): TransactionFeeProps => {
   const isLoading =
     isLoadingNativeToken || isLoadingGasEstimate || isLoadingGasPriceTable;
 
+  const gasSourceSwitch =
+    txKinds.includes("ShieldedTransfer") ||
+    txKinds.includes("UnshieldingTransfer");
+
   return {
     gasConfig,
     isLoading,
     gasEstimate,
     gasPriceTable,
     gasSource,
+    gasSourceSwitch,
     onChangeGasLimit: setGasLimitValue,
     onChangeGasToken: setGasTokenValue,
     onChangeGasSource: setGasSource,