fix: ibc shieled deposits with frontend fees

Author: mateuszjasiuk

apps/namadillo/public/config.toml

@@ -8,9 +8,9 @@
 [frontend_fee."*"]
 transparent_target = "tnam1qrxsru5rdu4he400xny6p779fcw7xuftsgjnmzup"
 shielded_target = "znam1494fmm9qd4frr7jrydnxlcyt57nhngzutxnzgh6y70mkvh23d9z0jk2aasxh4p8dn2kczlgpans"
-percentage = 0.1
+percentage = 0.01
 
-[frontend_fee.tnam1p54697ljxkw3ptffwy8xjhua9uwjc7kk9cc6fxnw]
-transparent_target = "tnam1qrku7yxdt6d23nhe826ntukygzkfyczuu5mm0yll"
-shielded_target = "znam175uaqlukleyjjyfcccehp2pw3g696a57skewlv0fenldlw702gtjd6qkpjs09zxl6jafsz3e73h"
-percentage = 0.5
+# [frontend_fee.tnam1p54697ljxkw3ptffwy8xjhua9uwjc7kk9cc6fxnw]
+# transparent_target = "tnam1qrku7yxdt6d23nhe826ntukygzkfyczuu5mm0yll"
+# shielded_target = "znam175uaqlukleyjjyfcccehp2pw3g696a57skewlv0fenldlw702gtjd6qkpjs09zxl6jafsz3e73h"
+# percentage = 0.5

apps/namadillo/src/App/Ibc/IbcTransfer.tsx

@@ -68,18 +68,18 @@ export const IbcTransfer = ({
   );
   const { trackEvent } = useFathomTracker();
   const { storeTransaction } = useTransactionActions();
+  const shielded = isShieldedAddress(destinationAddress ?? "");
 
   const { transferToNamada, gasConfig, frontendFee } = useIbcTransaction({
     registry,
     sourceAddress,
     sourceChannel,
     destinationChannel,
-    shielded: isShieldedAddress(destinationAddress ?? ""),
+    shielded,
     selectedAsset: selectedAssetWithAmount?.asset,
   });
 
   // DERIVED VALUES
-  const shielded = isShieldedAddress(destinationAddress ?? "");
   const availableDisplayAmount = mapUndefined((baseDenom) => {
     return userAssets ? userAssets[baseDenom]?.amount : undefined;
   }, selectedAssetWithAmount?.asset?.address);
@@ -124,11 +124,16 @@ export const IbcTransfer = ({
   }: OnSubmitTransferParams): Promise<void> => {
     try {
       invariant(registry?.chain, "Error: Chain not selected");
+      invariant(selectedAssetWithAmount?.asset, "Error: Asset not selected");
+      invariant(displayAmount, "Error: Amount not specified");
+      invariant(destinationAddress, "Error: Destination address not specified");
+
       setGeneralErrorMessage("");
       setCurrentStatus("Submitting...");
+
       const result = await transferToNamada.mutateAsync({
-        destinationAddress: destinationAddress ?? "",
-        displayAmount: new BigNumber(displayAmount ?? "0"),
+        destinationAddress,
+        displayAmount: BigNumber(displayAmount),
         memo,
         onUpdateStatus: setCurrentStatus,
       });

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

@@ -25,8 +25,9 @@ import {
   useNavigate,
   useSearchParams,
 } from "react-router-dom";
-import { AssetWithAmountAndChain } from "types";
+import { AssetWithAmountAndChain, NamadaAsset } from "types";
 import { filterAvailableAssetsWithBalance } from "utils/assets";
+import { getFrontendFeeEntry } from "utils/frontendFee";
 import { getDisplayGasFee } from "utils/gas";
 import { isIbcAddress, isShieldedAddress } from "./common";
 import { IbcChannels } from "./IbcChannels";
@@ -133,7 +134,14 @@ export const TransferModule = ({
   }, [gasConfig]);
 
   const availableAmountMinusFees = useMemo(() => {
-    if (!availableAmount || !availableAssets || !displayGasFee) return;
+    if (
+      !availableAmount ||
+      !availableAssets ||
+      !displayGasFee ||
+      !gasConfig ||
+      !frontendFee
+    )
+      return;
     let amountMinusFees = availableAmount;
 
     if (gasConfig?.gasToken === selectedAsset?.asset.address) {
@@ -142,9 +150,10 @@ export const TransferModule = ({
         .decimalPlaces(6);
     }
 
-    // TODO: move this code
-    const frontendSusFee =
-      frontendFee?.[selectedAsset.asset.address || "default"];
+    const frontendSusFee = getFrontendFeeEntry(
+      frontendFee,
+      (selectedAsset.asset as NamadaAsset).address
+    );
 
     if (frontendSusFee && (isShielding || isUnshielding)) {
       amountMinusFees = amountMinusFees

apps/namadillo/src/atoms/fees/atoms.ts

@@ -5,9 +5,17 @@ import {
 import { defaultAccountAtom } from "atoms/accounts";
 import { indexerApiAtom } from "atoms/api";
 import { namadaRegistryChainAssetsMapAtom } from "atoms/integrations";
+import { defaultServerConfigAtom } from "atoms/settings";
 import { queryDependentFn } from "atoms/utils";
 import BigNumber from "bignumber.js";
+import * as E from "fp-ts/Either";
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/Option";
+import * as R from "fp-ts/Record";
 import invariant from "invariant";
+import * as t from "io-ts";
+import { PathReporter } from "io-ts/PathReporter";
+import { atom } from "jotai";
 import { atomWithQuery } from "jotai-tanstack-query";
 import { atomFamily } from "jotai/utils";
 import { isPublicKeyRevealed } from "lib/query";
@@ -98,3 +106,41 @@ export const isPublicKeyRevealedAtom = atomWithQuery<boolean>((get) => {
     }, [defaultAccount]),
   };
 });
+
+const FrontendFeeSchema = t.union([
+  t.undefined,
+  t.record(
+    t.string,
+    t.type({
+      transparent_target: t.string,
+      shielded_target: t.string,
+      percentage: t.number,
+    })
+  ),
+]);
+
+export const frontendFeeAtom = atom((get) => {
+  const maybeFrontendFee = get(defaultServerConfigAtom).data?.frontend_fee;
+  const eitherFrontendFee = FrontendFeeSchema.decode(maybeFrontendFee);
+  if (E.isLeft(eitherFrontendFee)) {
+    console.warn(
+      "Invalid frontend fee schema: ",
+      PathReporter.report(eitherFrontendFee).join("\n")
+    );
+    return {};
+  }
+  // TODO: validate if targets are valid addresses
+
+  return pipe(
+    O.fromNullable(eitherFrontendFee.right),
+    O.fold(
+      () => ({}),
+      (fees) => fees
+    ),
+    R.map((fee) => ({
+      transparentTarget: fee.transparent_target,
+      shieldedTarget: fee.shielded_target,
+      percentage: BigNumber(fee.percentage),
+    }))
+  );
+});

apps/namadillo/src/atoms/fees/services.ts

@@ -3,9 +3,6 @@ import {
   GasEstimate,
   GasPriceTableInner,
 } from "@namada/indexer-client";
-import { FrontendSusFeeProps } from "@namada/sdk-multicore";
-import { assertNever } from "@namada/utils";
-import { FrontendFee } from "types";
 import { TxKind } from "types/txKind";
 
 export const fetchGasEstimate = async (
@@ -51,24 +48,3 @@ export const fetchTokensGasPrice = async (
 ): Promise<GasPriceTableInner[]> => {
   return (await api.apiV1GasPriceGet()).data;
 };
-
-export const frontendSusMsgFromConfig = (
-  frontendFee: FrontendFee,
-  token: string,
-  whichTarget: "shielded" | "transparent"
-): FrontendSusFeeProps => {
-  const { percentage, shieldedTarget, transparentTarget } =
-    frontendFee[token] || frontendFee["*"];
-
-  const target =
-    whichTarget === "shielded" ? shieldedTarget
-    : whichTarget === "transparent" ? transparentTarget
-    : assertNever(whichTarget);
-
-  const frontendSusFee = {
-    percentage: percentage,
-    target,
-  };
-
-  return frontendSusFee;
-};

apps/namadillo/src/atoms/integrations/services.ts

@@ -16,8 +16,8 @@ import {
 } from "@namada/indexer-client";
 import { getIndexerApi } from "atoms/api";
 import { chainParametersAtom } from "atoms/chain";
-import { frontendSusMsgFromConfig } from "atoms/fees";
-import { frontendFeeAtom, rpcUrlAtom } from "atoms/settings";
+import { frontendFeeAtom } from "atoms/fees";
+import { rpcUrlAtom } from "atoms/settings";
 import { queryForAck, queryForIbcTimeout } from "atoms/transactions";
 import BigNumber from "bignumber.js";
 import * as Comlink from "comlink";
@@ -36,6 +36,7 @@ import {
   TransferStep,
   TransferTransactionData,
 } from "types";
+import { frontendSusMsgFromConfig } from "utils/frontendFee";
 import { isError404 } from "utils/http";
 import { getKeplrWallet } from "utils/ibc";
 import { getSdkInstance } from "utils/sdk";

apps/namadillo/src/atoms/settings/atoms.ts

@@ -1,9 +1,6 @@
 import { isUrlValid, sanitizeUrl } from "@namada/utils";
 import { getCustomIndexerApi, indexerApiAtom } from "atoms/api";
 import { chainParametersAtom, indexerRpcUrlAtom } from "atoms/chain";
-import BigNumber from "bignumber.js";
-import { pipe } from "fp-ts/lib/function";
-import * as R from "fp-ts/Record";
 import { Getter, Setter, atom, getDefaultStore } from "jotai";
 import { atomWithMutation, atomWithQuery } from "jotai-tanstack-query";
 import { atomWithStorage } from "jotai/utils";
@@ -178,20 +175,6 @@ export const maspIndexerUrlAtom = atom((get) => {
   return "";
 });
 
-// TODO: figure out where to have this atom
-export const frontendFeeAtom = atom((get) => {
-  const frontendFee = get(defaultServerConfigAtom).data?.frontend_fee;
-  // TODO: validate with schema
-  return pipe(
-    frontendFee ?? {},
-    R.map((fee) => ({
-      transparentTarget: fee.transparent_target,
-      shieldedTarget: fee.shielded_target,
-      percentage: BigNumber(fee.percentage),
-    }))
-  );
-});
-
 export const updateIndexerUrlAtom = atomWithMutation(() => {
   return {
     mutationKey: ["update-indexer-url"],

apps/namadillo/src/atoms/transfer/services.ts

@@ -13,12 +13,12 @@ import {
   AccountType,
   GenDisposableSignerResponse,
 } from "@namada/types";
-import { frontendSusMsgFromConfig } from "atoms/fees";
 import BigNumber from "bignumber.js";
 import * as Comlink from "comlink";
 import { NamadaKeychain } from "hooks/useNamadaKeychain";
 import { buildTx, EncodedTxData, isPublicKeyRevealed } from "lib/query";
 import { Address, ChainSettings, FrontendFee, GasConfig } from "types";
+import { frontendSusMsgFromConfig } from "utils/frontendFee";
 import { getSdkInstance } from "utils/sdk";
 import {
   IbcTransfer,

apps/namadillo/src/hooks/useIbcTransaction.tsx

@@ -7,6 +7,7 @@ import {
 } from "@tanstack/react-query";
 import { TokenCurrency } from "App/Common/TokenCurrency";
 import { chainParametersAtom } from "atoms/chain";
+import { frontendFeeAtom } from "atoms/fees";
 import {
   broadcastIbcTransactionAtom,
   createStargateClient,
@@ -19,8 +20,9 @@ import {
   createNotificationId,
   dispatchToastNotificationAtom,
 } from "atoms/notifications";
-import { frontendFeeAtom } from "atoms/settings";
 import BigNumber from "bignumber.js";
+import { pipe } from "fp-ts/lib/function";
+import * as O from "fp-ts/Option";
 import invariant from "invariant";
 import { useAtomValue, useSetAtom } from "jotai";
 import {
@@ -35,11 +37,16 @@ import {
   FrontendFee,
   GasConfig,
   IbcTransferStage,
+  NamadaAsset,
   TransferStep,
   TransferTransactionData,
 } from "types";
 import { toBaseAmount } from "utils";
 import { sanitizeAddress } from "utils/address";
+import {
+  calculateAmountWithFrontendFee,
+  getFrontendFeeEntry,
+} from "utils/frontendFee";
 import { getKeplrWallet, sanitizeChannel } from "utils/ibc";
 import { useSimulateIbcTransferFee } from "./useSimulateIbcTransferFee";
 
@@ -193,6 +200,11 @@ export const useIbcTransaction = ({
           gasConfigQuery.error?.message
       );
 
+      const frontendFeeEntry = getFrontendFeeEntry(
+        frontendFee,
+        (selectedAsset as NamadaAsset).address
+      );
+
       const baseAmount = toBaseAmount(selectedAsset, displayAmount);
 
       const sourceChainAssets =
@@ -227,11 +239,25 @@ export const useIbcTransaction = ({
       const chainId = registry.chain.chain_id;
       const denomination = asset.base;
 
+      const amount = pipe(
+        frontendFeeEntry,
+        O.fromNullable,
+        O.filter(() => !!shielded),
+        O.fold(
+          () => baseAmount,
+          (fee) =>
+            toBaseAmount(
+              selectedAsset,
+              calculateAmountWithFrontendFee(BigNumber(displayAmount), fee)
+            )
+        )
+      );
+
       const transferMsg = createIbcTransferMessage(
         sanitizeChannel(sourceChannel!),
         sanitizeAddress(sourceAddress),
         sanitizeAddress(maspCompatibleReceiver),
-        baseAmount,
+        amount,
         denomination,
         maspCompatibleMemo
       );
@@ -256,7 +282,8 @@ export const useIbcTransaction = ({
         chainId,
         destinationChainId || "",
         getIbcTransferStage(!!shielded),
-        !!shielded
+        !!shielded,
+        baseAmount
       );
       dispatchPendingTxNotification(tx);
       setTxHash(tx.hash);

apps/namadillo/src/hooks/useTransactionFee/useTransactionFee.ts

@@ -3,13 +3,13 @@ import { transparentBalanceAtom } from "atoms/accounts";
 import { shieldedBalanceAtom } from "atoms/balance";
 import { nativeTokenAddressAtom } from "atoms/chain";
 import {
+  frontendFeeAtom,
   gasEstimateFamily,
   GasPriceTable,
   gasPriceTableAtom,
   isPublicKeyRevealedAtom,
 } from "atoms/fees";
 import { tokenPricesFamily } from "atoms/prices/atoms";
-import { frontendFeeAtom } from "atoms/settings";
 import BigNumber from "bignumber.js";
 import invariant from "invariant";
 import { useAtomValue } from "jotai";