feat: ui for ibc

mateuszjasiuk · mateuszjasiuk · commit a0602e24fd05 · 2025-12-18T10:40:00.000+01:00
diff --git a/apps/extension/package.json b/apps/extension/package.json
@@ -35,7 +35,7 @@
     "@dao-xyz/borsh": "^5.1.5",
     "@ledgerhq/hw-transport": "^6.31.4",
     "@ledgerhq/hw-transport-webusb": "^6.29.4",
-    "@namada/sdk": "0.23.0",
+    "@namada/sdk": "0.24.0-beta.1",
     "@zondax/ledger-namada": "^2.0.0",
     "bignumber.js": "^9.1.1",
     "buffer": "^6.0.3",
@@ -54,7 +54,7 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-modules-commonjs": "^7.20.11",
-    "@namada/sdk-node": "0.23.0",
+    "@namada/sdk-node": "0.24.0-beta.1",
     "@svgr/webpack": "^6.3.1",
     "@types/chrome": "^0.0.237",
     "@types/firefox-webext-browser": "^94.0.1",
diff --git a/apps/namadillo/package.json b/apps/namadillo/package.json
@@ -12,7 +12,7 @@
     "@keplr-wallet/types": "^0.12.136",
     "@namada/chain-registry": "^1.5.2",
     "@namada/indexer-client": "4.0.5",
-    "@namada/sdk-multicore": "file:.yalc/@namada/sdk-multicore",
+    "@namada/sdk-multicore": "0.24.0-beta.1",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tanstack/query-core": "^5.40.0",
     "@tanstack/react-query": "^5.40.0",
@@ -79,7 +79,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.9.1",
-    "@namada/sdk-node": "0.23.0",
+    "@namada/sdk-node": "0.24.0-beta.1",
     "@namada/vite-esbuild-plugin": "^1.0.1",
     "@playwright/test": "^1.24.1",
     "@svgr/webpack": "^6.5.1",
diff --git a/apps/namadillo/src/App/Common/TransferFee.tsx b/apps/namadillo/src/App/Common/TransferFee.tsx
@@ -19,37 +19,41 @@ type FrontendFeeInfo = {
   displayAmount?: BigNumber;
   token?: Address;
 };
-
-export const TransferFeeButton = ({
+export const TransferFee = ({
   feeProps,
   inOrOutOfMASP,
   isShieldedTransfer = false,
   frontendFeeInfo,
+  showButton = true,
 }: {
   feeProps: TransactionFeeProps;
   inOrOutOfMASP: boolean;
   isShieldedTransfer?: boolean;
   frontendFeeInfo?: FrontendFeeInfo;
+  showButton?: boolean;
 }): JSX.Element => {
   const [modalOpen, setModalOpen] = useState(false);
   const [feeDetailsOpen, setFeeDetailsOpen] = useState(false);
 
   const chainAssetsMap = useAtomValue(namadaRegistryChainAssetsMapAtom);
 
-  const gasDollarMap =
-    useAtomValue(
-      tokenPricesFamily(
-        feeProps.gasPriceTable?.map((item) => item.token.address) ?? []
-      )
-    ).data ?? {};
+  const chainAssetsMapData = chainAssetsMap.data;
 
   const gasDisplayAmount = useMemo(() => {
-    if (!chainAssetsMap.data) {
+    if (!chainAssetsMapData) {
       return;
     }
 
-    return getDisplayGasFee(feeProps.gasConfig, chainAssetsMap.data);
-  }, [feeProps, chainAssetsMap.data]);
+    return getDisplayGasFee(feeProps.gasConfig, chainAssetsMapData);
+  }, [feeProps, chainAssetsMapData]);
+
+  const gasToken = gasDisplayAmount?.asset.address;
+  const frontendFeeToken = frontendFeeInfo?.token;
+  const tokenAddresses =
+    gasToken && frontendFeeToken ? [gasToken, frontendFeeToken] : [];
+
+  const gasDollarMap =
+    useAtomValue(tokenPricesFamily(tokenAddresses)).data ?? {};
 
   const [frontendFeeAmount, frontendFeeFiatAmount, symbol] = useMemo((): [
     BigNumber?,
@@ -67,26 +71,26 @@ export const TransferFeeButton = ({
       );
       const dollarPrice = gasDollarMap[frontendFeeInfo.token];
       const fiatFeeAmount = feeAmount.multipliedBy(dollarPrice);
-      const symbol = chainAssetsMap?.data?.[frontendFeeInfo.token]?.symbol;
+      const symbol = chainAssetsMapData?.[frontendFeeInfo.token]?.symbol;
 
       return [feeAmount, fiatFeeAmount, symbol];
     }
     return [];
   }, [gasDollarMap, frontendFeeInfo]);
 
   const fiatAmount = useMemo(() => {
-    if (!gasDisplayAmount || !gasDollarMap) {
+    if (!gasDisplayAmount || !gasDollarMap || !gasToken) {
       return;
     }
-    const dollarPrice = gasDollarMap[feeProps.gasConfig.gasToken];
+    const dollarPrice = gasDollarMap[gasToken];
     let fiatAmount =
       gasDisplayAmount.totalDisplayAmount.multipliedBy(dollarPrice);
 
-    if (frontendFeeFiatAmount) {
+    if (inOrOutOfMASP && frontendFeeFiatAmount) {
       fiatAmount = fiatAmount.plus(frontendFeeFiatAmount);
     }
     return fiatAmount;
-  }, [gasDisplayAmount, gasDollarMap, frontendFeeAmount]);
+  }, [gasDisplayAmount, gasDollarMap, inOrOutOfMASP, gasToken]);
 
   return (
     <Stack className="w-full text-sm text-neutral-300">
@@ -114,22 +118,25 @@ export const TransferFeeButton = ({
                   gasDisplayAmount.totalDisplayAmount.toString()
                 : ""}{" "}
               </div>
-              <div className="flex items-center gap-2">
-                <button
-                  type="button"
-                  className={twMerge(
-                    "flex items-center gap-1",
-                    "border rounded-sm px-2 py-1 text-xs",
-                    "transition-all cursor-pointer hover:text-yellow"
-                  )}
-                  onClick={() => setModalOpen(true)}
-                >
-                  <span className="text- font-medium">
-                    {gasDisplayAmount?.asset.symbol || ""}
-                  </span>
-                  <IoIosArrowDown />
-                </button>
-              </div>
+              {!showButton && gasDisplayAmount?.asset.symbol}
+              {showButton && (
+                <div className="flex items-center gap-2">
+                  <button
+                    type="button"
+                    className={twMerge(
+                      "flex items-center gap-1",
+                      "border rounded-sm px-2 py-1 text-xs",
+                      "transition-all cursor-pointer hover:text-yellow"
+                    )}
+                    onClick={() => setModalOpen(true)}
+                  >
+                    <span className="text- font-medium">
+                      {gasDisplayAmount?.asset.symbol || ""}
+                    </span>
+                    <IoIosArrowDown />
+                  </button>
+                </div>
+              )}
             </Stack>
           </Stack>
           {inOrOutOfMASP && frontendFeeInfo && (
diff --git a/apps/namadillo/src/App/Ibc/IbcTransfer.tsx b/apps/namadillo/src/App/Ibc/IbcTransfer.tsx
@@ -70,7 +70,7 @@ export const IbcTransfer = ({
   const { storeTransaction } = useTransactionActions();
   const shielded = isShieldedAddress(destinationAddress ?? "");
 
-  const { transferToNamada, gasConfig, frontendFee } = useIbcTransaction({
+  const { transferToNamada, transactionFeeProps } = useIbcTransaction({
     registry,
     sourceAddress,
     sourceChannel,
@@ -166,8 +166,7 @@ export const IbcTransfer = ({
           isShieldedAddress: shielded,
           onChangeAddress: setDestinationAddress,
         }}
-        gasConfig={gasConfig.data}
-        frontendFee={frontendFee}
+        feeProps={transactionFeeProps}
         isSubmitting={
           transferToNamada.isPending ||
           /* isSuccess means that the transaction has been broadcasted, but doesn't take
diff --git a/apps/namadillo/src/App/Transfer/TransferDestination.tsx b/apps/namadillo/src/App/Transfer/TransferDestination.tsx
@@ -4,8 +4,7 @@ import { AccountType } from "@namada/types";
 import { shortenAddress } from "@namada/utils";
 import { ConnectProviderButton } from "App/Common/ConnectProviderButton";
 import { TokenAmountCard } from "App/Common/TokenAmountCard";
-import { TransactionFee } from "App/Common/TransactionFee";
-import { TransferFeeButton } from "App/Common/TransferFeeButton";
+import { TransferFee } from "App/Common/TransferFee";
 import { routes } from "App/routes";
 import {
   isIbcAddress,
@@ -40,8 +39,6 @@ type TransferDestinationProps = {
   isShieldedTx?: boolean;
   isSubmitting?: boolean;
   walletAddress?: string;
-  gasDisplayAmount?: BigNumber;
-  gasAsset?: Asset;
   feeProps?: TransactionFeeProps;
   destinationAsset?: Asset;
   amount?: BigNumber;
@@ -60,8 +57,6 @@ export const TransferDestination = ({
   isShieldedAddress,
   isShieldedTx = false,
   isSubmitting,
-  gasDisplayAmount,
-  gasAsset,
   feeProps,
   destinationAsset,
   amount,
@@ -309,29 +304,21 @@ export const TransferDestination = ({
 
         {!isSubmitting && (
           <footer className="flex mt-10">
-            {changeFeeEnabled ?
-              feeProps && (
-                <TransferFeeButton
-                  feeProps={feeProps}
-                  isShieldedTransfer={isShieldedTx}
-                  inOrOutOfMASP={isShielding || isUnshielding}
-                  frontendFeeInfo={
-                    frontendFee && {
-                      fee: frontendFee,
-                      displayAmount: amount,
-                      token: sourceAsset?.address,
-                    }
+            {feeProps && (
+              <TransferFee
+                feeProps={feeProps}
+                isShieldedTransfer={isShieldedTx}
+                inOrOutOfMASP={isShielding || isUnshielding}
+                showButton={changeFeeEnabled}
+                frontendFeeInfo={
+                  frontendFee && {
+                    fee: frontendFee,
+                    displayAmount: amount,
+                    token: sourceAsset?.address,
                   }
-                />
-              )
-            : gasDisplayAmount &&
-              gasAsset && (
-                <TransactionFee
-                  displayAmount={gasDisplayAmount}
-                  symbol={gasAsset.symbol}
-                />
-              )
-            }
+                }
+              />
+            )}
           </footer>
         )}
       </div>
diff --git a/apps/namadillo/src/App/Transfer/TransferModule.tsx b/apps/namadillo/src/App/Transfer/TransferModule.tsx
@@ -51,8 +51,6 @@ export const TransferModule = ({
   errorMessage,
   currentStatus,
   currentStatusExplanation,
-  gasConfig: gasConfigProp,
-  frontendFee: frontendFeeProp,
   onSubmitTransfer,
   completedAt,
   onComplete,
@@ -123,9 +121,8 @@ export const TransferModule = ({
     });
   };
 
-  // We have to do this to get correct config for ibc deposits
-  const gasConfig = gasConfigProp ?? feeProps?.gasConfig;
-  const frontendFee = frontendFeeProp ?? feeProps?.frontendFee;
+  const gasConfig = feeProps?.gasConfig;
+  const frontendFee = feeProps?.frontendFee;
 
   const displayGasFee = useMemo(() => {
     return gasConfig ?
@@ -257,8 +254,6 @@ export const TransferModule = ({
             memo={destination.memo}
             onChangeMemo={destination.onChangeMemo}
             feeProps={feeProps}
-            gasDisplayAmount={displayGasFee?.totalDisplayAmount}
-            gasAsset={displayGasFee?.asset}
             destinationAsset={selectedAsset?.asset}
             amount={source.amount}
             isSubmitting={isSubmitting}
diff --git a/apps/namadillo/src/hooks/useIbcTransaction.tsx b/apps/namadillo/src/hooks/useIbcTransaction.tsx
@@ -3,7 +3,6 @@ import {
   useMutation,
   UseMutationResult,
   useQuery,
-  UseQueryResult,
 } from "@tanstack/react-query";
 import { TokenCurrency } from "App/Common/TokenCurrency";
 import { chainParametersAtom } from "atoms/chain";
@@ -34,8 +33,6 @@ import {
   Address,
   Asset,
   ChainRegistryEntry,
-  FrontendFee,
-  GasConfig,
   IbcTransferStage,
   NamadaAsset,
   TransferStep,
@@ -49,6 +46,7 @@ import {
 } from "utils/frontendFee";
 import { getKeplrWallet, sanitizeChannel } from "utils/ibc";
 import { useSimulateIbcTransferFee } from "./useSimulateIbcTransferFee";
+import { TransactionFeeProps } from "./useTransactionFee";
 
 type useIbcTransactionProps = {
   sourceAddress?: string;
@@ -60,8 +58,7 @@ type useIbcTransactionProps = {
 };
 
 type useIbcTransactionOutput = {
-  gasConfig: UseQueryResult<GasConfig>;
-  frontendFee: FrontendFee;
+  transactionFeeProps?: TransactionFeeProps;
   transferToNamada: UseMutationResult<
     TransferTransactionData,
     Error,
@@ -301,9 +298,19 @@ export const useIbcTransaction = ({
     mutationFn: transferToNamada,
   });
 
+  const transactionFeeProps: TransactionFeeProps | undefined =
+    gasConfigQuery.data && {
+      gasConfig: gasConfigQuery.data,
+      isLoading: gasConfigQuery.isLoading,
+      onChangeGasLimit: () => {},
+      onChangeGasToken: () => {},
+      frontendFee: frontendFee,
+      gasEstimate: undefined,
+      gasPriceTable: undefined,
+    };
+
   return {
     transferToNamada: transferToNamadaQuery,
-    gasConfig: gasConfigQuery,
-    frontendFee: frontendFee,
+    transactionFeeProps,
   };
 };
diff --git a/yarn.lock b/yarn.lock
