feat: enable gas source switch only for unshielding and shielded

transfers

Author: mateuszjasiuk

apps/extension/src/Approvals/ConfirmSignLedgerTx.tsx

@@ -188,8 +188,6 @@ export const ConfirmSignLedgerTx: React.FC<Props> = ({ details }) => {
       setStepTwoDescription("Preparing transaction...");
 
       try {
-        // TODO: we have to check if the signer is disposable or not
-
         const accountDetails = await requester.sendMessage(
           Ports.Background,
           new QueryAccountDetailsMsg(signer)
@@ -235,6 +233,11 @@ export const ConfirmSignLedgerTx: React.FC<Props> = ({ details }) => {
                   .type
             )
         );
+        const disposableSigner = txDetails.reduce((acc, curr) => {
+          console.log("www", curr.wrapperFeePayer, accountDetails.address);
+          return acc || curr.wrapperFeePayer !== accountDetails.address;
+        }, false);
+
         // For now we work under the assumption that we can't batch transfers from masp with other tx types
         const fromMasp =
           transferTypes.includes("Shielded") ||
@@ -257,7 +260,9 @@ export const ConfirmSignLedgerTx: React.FC<Props> = ({ details }) => {
             });
             // Adds new signature to the collection
             await handleMaspSignTx(ledger, tx, zip32Path, maspSignatures);
-          } else {
+          }
+
+          if (!disposableSigner) {
             const bip44Path = makeBip44Path(chains.namada.bip44.coinType, path);
             // Adds new signature to the collection
             await handleSignTx(ledger, tx, bip44Path, signatures);
@@ -273,10 +278,18 @@ export const ConfirmSignLedgerTx: React.FC<Props> = ({ details }) => {
             Ports.Background,
             new ReplaceMaspSignaturesMsg(msgId, maspSignatures)
           );
-          await requester.sendMessage(
-            Ports.Background,
-            new SubmitApprovedSignTxMsg(msgId, signer)
-          );
+
+          if (disposableSigner) {
+            await requester.sendMessage(
+              Ports.Background,
+              new SubmitApprovedSignTxMsg(msgId, signer)
+            );
+          } else {
+            await requester.sendMessage(
+              Ports.Background,
+              new SubmitApprovedSignLedgerTxMsg(msgId, signatures)
+            );
+          }
         } else {
           await requester.sendMessage(
             Ports.Background,

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

@@ -5,6 +5,7 @@ import {
   Modal,
   Stack,
   StyledSelectBox,
+  Text,
   ToggleButton,
 } from "@namada/components";
 import { transparentBalanceAtom } from "atoms/accounts";
@@ -97,7 +98,6 @@ const useBuildGasOption = ({
 export const GasFeeModal = ({
   feeProps,
   onClose,
-  isShielded = false,
 }: {
   feeProps: TransactionFeeProps;
   onClose: () => void;
@@ -108,6 +108,7 @@ export const GasFeeModal = ({
     gasEstimate,
     gasPriceTable,
     gasSource,
+    gasSourceSwitch,
     onChangeGasLimit,
     onChangeGasToken,
     onChangeGasSource,
@@ -122,7 +123,7 @@ export const GasFeeModal = ({
   const findUserBalanceByTokenAddress = (tokenAddres: string): BigNumber => {
     // TODO: we need to refactor userShieldedBalances to return Balance[] type instead
     const balances =
-      isShielded ?
+      gasSource === "shielded" ?
         shieldedAmount.data?.map((balance) => ({
           minDenomAmount: balance.minDenomAmount,
           tokenAddress: balance.address,
@@ -211,27 +212,38 @@ export const GasFeeModal = ({
           <span className="text-xs text-neutral-500 text-right">Balance</span>
           <span className="text-xs text-neutral-500 text-right">Fee</span>
         </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/App/Common/TransactionFeeButton.tsx

@@ -11,11 +11,9 @@ import { TransactionFee } from "./TransactionFee";
 export const TransactionFeeButton = ({
   feeProps,
   className,
-  isShieldedTransfer = false,
 }: {
   feeProps: TransactionFeeProps;
   className?: string;
-  isShieldedTransfer?: boolean;
 }): JSX.Element => {
   const [modalOpen, setModalOpen] = useState(false);
   const chainAssetsMap = useAtomValue(chainAssetsMapAtom);
@@ -54,11 +52,7 @@ export const TransactionFeeButton = ({
         </div>
       </div>
       {modalOpen && (
-        <GasFeeModal
-          feeProps={feeProps}
-          onClose={() => setModalOpen(false)}
-          isShielded={isShieldedTransfer}
-        />
+        <GasFeeModal feeProps={feeProps} onClose={() => setModalOpen(false)} />
       )}
     </>
   );

apps/namadillo/src/App/Masp/MaspUnshield.tsx

@@ -162,7 +162,6 @@ export const MaspUnshield: React.FC = () => {
           isShieldedAddress: false,
         }}
         feeProps={feeProps}
-        isShieldedTx={true}
         isSubmitting={isPerformingTransfer || isSuccess}
         errorMessage={generalErrorMessage}
         onSubmitTransfer={onSubmitTransfer}

apps/namadillo/src/App/NamadaTransfer/NamadaTransfer.tsx

@@ -202,7 +202,6 @@ export const NamadaTransfer: React.FC = () => {
         feeProps={feeProps}
         currentStatus={currentStatus}
         currentStatusExplanation={currentStatusExplanation}
-        isShieldedTx={isSourceShielded}
         isSubmitting={
           isPerformingTransfer || isTransferSuccessful || Boolean(completedAt)
         }

apps/namadillo/src/App/Transfer/TransferDestination.tsx

@@ -15,7 +15,6 @@ import { TokenAmountCard } from "./TokenAmountCard";
 
 type TransferDestinationProps = {
   isShieldedAddress?: boolean;
-  isShieldedTx?: boolean;
   onChangeShielded?: (isShielded: boolean) => void;
   chain?: Chain;
   wallet?: WalletProvider;
@@ -43,7 +42,6 @@ export const TransferDestination = ({
   wallet,
   walletAddress,
   isShieldedAddress,
-  isShieldedTx = false,
   onChangeShielded,
   gasDisplayAmount,
   gasAsset,
@@ -173,12 +171,7 @@ export const TransferDestination = ({
       {!isSubmitting && (
         <footer className="flex items-center mt-10">
           {changeFeeEnabled ?
-            feeProps && (
-              <TransactionFeeButton
-                feeProps={feeProps}
-                isShieldedTransfer={isShieldedTx}
-              />
-            )
+            feeProps && <TransactionFeeButton feeProps={feeProps} />
           : gasDisplayAmount &&
             gasAsset && (
               <TransactionFee

apps/namadillo/src/App/Transfer/TransferModule.tsx

@@ -95,7 +95,6 @@ export type TransferModuleProps = {
   currentStatus?: string;
   currentStatusExplanation?: string;
   completedAt?: Date;
-  isShieldedTx?: boolean;
   buttonTextErrors?: Partial<Record<ValidationResult, string>>;
   onComplete?: () => void;
 } & (
@@ -135,7 +134,6 @@ export const TransferModule = ({
   completedAt,
   onComplete,
   buttonTextErrors = {},
-  isShieldedTx = false,
 }: TransferModuleProps): JSX.Element => {
   const navigate = useNavigate();
   const location = useLocation();
@@ -470,7 +468,6 @@ export const TransferModule = ({
               destination.isShieldedAddress
             )}
             isShieldedAddress={destination.isShieldedAddress}
-            isShieldedTx={isShieldedTx}
             onChangeShielded={destination.onChangeShielded}
             address={destination.customAddress}
             onToggleCustomAddress={

apps/namadillo/src/hooks/useTransactionFee.ts

@@ -21,6 +21,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;
@@ -35,9 +36,10 @@ export const useTransactionFee = (
   const userTransparentBalances = useAtomValue(transparentBalanceAtom);
   const userShieldedBalances = useAtomValue(shieldedBalanceAtom);
   const [gasSource, setGasSource] = useState<"shielded" | "transparent">(
-    "shielded"
+    isShielded ? "shielded" : "transparent"
   );
   const isPublicKeyRevealed = useAtomValue(isPublicKeyRevealedAtom);
+  const isShieldedSource = gasSource === "shielded";
 
   const { data: nativeToken, isLoading: isLoadingNativeToken } = useAtomValue(
     nativeTokenAddressAtom
@@ -80,17 +82,17 @@ export const useTransactionFee = (
   const availableGasTokenAddress = useMemo(() => {
     if (!gasPriceTable) return nativeToken;
 
-    if (isShielded && !userShieldedBalances.data) {
+    if (isShieldedSource && !userShieldedBalances.data) {
       return nativeToken;
     }
 
-    if (!isShielded && !userTransparentBalances.data) {
+    if (!isShieldedSource && !userTransparentBalances.data) {
       return nativeToken;
     }
 
     // Separate shielded amount from transparent
     const balances =
-      (isShielded ?
+      (isShieldedSource ?
         // TODO: we need to refactor userShieldedBalances to return Balance[] type instead
         userShieldedBalances.data?.map((balance) => ({
           minDenomAmount: balance.minDenomAmount,
@@ -128,7 +130,7 @@ export const useTransactionFee = (
     userShieldedBalances.data,
     gasPriceTable,
     gasDollarMap,
-    isShielded,
+    isShieldedSource,
   ]);
 
   const averageGasLimit = gasEstimate && BigNumber(gasEstimate.avg);
@@ -149,12 +151,17 @@ export const useTransactionFee = (
     isLoadingGasEstimate ||
     isLoadingGasPriceTable;
 
+  const gasSourceSwitch =
+    txKinds.includes("ShieldedTransfer") ||
+    txKinds.includes("UnshieldingTransfer");
+
   return {
     gasConfig,
     isLoading,
     gasEstimate,
     gasPriceTable,
     gasSource,
+    gasSourceSwitch,
     onChangeGasLimit: setGasLimitValue,
     onChangeGasToken: setGasTokenValue,
     onChangeGasSource: setGasSource,