feat: wip pay fees for masp with transparent balance

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/extension/src/background/keyring/keyring.ts

@@ -796,7 +796,7 @@ export class KeyRing {
     const realAddress = disposableKey?.realAddress || signer;
 
     // If disposable key is provided, use it to map real address to spending key
-    const xsks = [await this.getSpendingKey(realAddress)];
+    const xsks = [await this.getSpendingKey(disposableKey ? realAddress : signer)];
 
     const { signing } = this.sdkService.getSdk();
 

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

@@ -3,7 +3,10 @@ import {
   ActionButton,
   AmountInput,
   Modal,
+  Stack,
   StyledSelectBox,
+  Text,
+  ToggleButton,
 } from "@namada/components";
 import { transparentBalanceAtom } from "atoms/accounts";
 import { shieldedBalanceAtom } from "atoms/balance";
@@ -95,7 +98,6 @@ const useBuildGasOption = ({
 export const GasFeeModal = ({
   feeProps,
   onClose,
-  isShielded = false,
 }: {
   feeProps: TransactionFeeProps;
   onClose: () => void;
@@ -105,8 +107,11 @@ export const GasFeeModal = ({
     gasConfig,
     gasEstimate,
     gasPriceTable,
+    gasSource,
+    gasSourceSwitch,
     onChangeGasLimit,
     onChangeGasToken,
+    onChangeGasSource,
   } = feeProps;
 
   const sortByNativeToken = useSortByNativeToken();
@@ -118,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,
@@ -207,6 +212,39 @@ 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>
+          {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"
           value={gasConfig.gasToken}

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={