feat: add useTransfer

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

@@ -3,44 +3,38 @@ import { Panel } from "@namada/components";
 import { AccountType } from "@namada/types";
 import { Timeline } from "App/Common/Timeline";
 import { params } from "App/routes";
-import {
-  OnSubmitTransferParams,
-  TransferModule,
-} from "App/Transfer/TransferModule";
+import { TransferModule } from "App/Transfer/TransferModule";
 import { allDefaultAccountsAtom } from "atoms/accounts";
 import { namadaTransparentAssetsAtom } from "atoms/balance/atoms";
 import { chainParametersAtom } from "atoms/chain/atoms";
-import { defaultGasConfigFamily } from "atoms/fees/atoms";
-import { shieldTxAtom } from "atoms/shield/atoms";
+import { rpcUrlAtom } from "atoms/settings";
 import BigNumber from "bignumber.js";
 import clsx from "clsx";
 import { AnimatePresence, motion } from "framer-motion";
 import { useTransactionActions } from "hooks/useTransactionActions";
+import { useTransfer } from "hooks/useTransfer";
 import { wallets } from "integrations";
 import { getAssetImageUrl } from "integrations/utils";
+import invariant from "invariant";
 import { useAtomValue } from "jotai";
+import { createTransferDataFromNamada } from "lib/transactions";
 import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import namadaChain from "registry/namada.json";
-import {
-  Address,
-  PartialTransferTransactionData,
-  TransferStep,
-  TransferTransactionData,
-} from "types";
+import { Address, PartialTransferTransactionData, TransferStep } from "types";
 import { MaspTopHeader } from "./MaspTopHeader";
 
 export const MaspShield: React.FC = () => {
   const [searchParams, setSearchParams] = useSearchParams();
 
+  const rpcUrl = useAtomValue(rpcUrlAtom);
   const chainParameters = useAtomValue(chainParametersAtom);
   const defaultAccounts = useAtomValue(allDefaultAccountsAtom);
   const { data: availableAssets, isLoading: isLoadingAssets } = useAtomValue(
     namadaTransparentAssetsAtom
   );
-  const performShieldTransfer = useAtomValue(shieldTxAtom);
 
-  const [amount, setAmount] = useState<BigNumber | undefined>();
+  const [displayAmount, setDisplayAmount] = useState<BigNumber | undefined>();
   const [currentStepIndex, setCurrentStepIndex] = useState(0);
   const [generalErrorMessage, setGeneralErrorMessage] = useState("");
 
@@ -65,10 +59,20 @@ export const MaspShield: React.FC = () => {
   const selectedAssetAddress = searchParams.get(params.asset) || undefined;
   const selectedAsset =
     selectedAssetAddress ? availableAssets?.[selectedAssetAddress] : undefined;
+  const source = sourceAddress ?? "";
+  const target = destinationAddress ?? "";
 
-  const { data: gasConfig } = useAtomValue(
-    defaultGasConfigFamily(["ShieldingTransfer"])
-  );
+  const {
+    execute: performTransfer,
+    isPending: isPerformingTransfer,
+    txKind,
+    gasConfig,
+  } = useTransfer({
+    source,
+    target,
+    token: selectedAsset?.originalAddress ?? "",
+    displayAmount: displayAmount ?? new BigNumber(0),
+  });
 
   const assetImage = selectedAsset ? getAssetImageUrl(selectedAsset.asset) : "";
 
@@ -96,29 +100,15 @@ export const MaspShield: React.FC = () => {
     );
   };
 
-  const onSubmitTransfer = async ({
-    displayAmount,
-    destinationAddress,
-  }: OnSubmitTransferParams): Promise<void> => {
+  const onSubmitTransfer = async (): Promise<void> => {
     try {
       setGeneralErrorMessage("");
       setCurrentStepIndex(1);
 
-      if (typeof sourceAddress === "undefined") {
-        throw new Error("Source address is not defined");
-      }
-
-      if (!chainId) {
-        throw new Error("Chain ID is undefined");
-      }
-
-      if (!selectedAsset) {
-        throw new Error("No asset is selected");
-      }
-
-      if (typeof gasConfig === "undefined") {
-        throw new Error("No gas config");
-      }
+      invariant(sourceAddress, "Source address is not defined");
+      invariant(chainId, "Chain ID is undefined");
+      invariant(selectedAsset, "No asset is selected");
+      invariant(gasConfig, "No gas config");
 
       setTransaction({
         type: "TransparentToShielded",
@@ -127,38 +117,30 @@ export const MaspShield: React.FC = () => {
         chainId,
       });
 
-      const txResponse = await performShieldTransfer.mutateAsync({
-        sourceAddress,
-        destinationAddress,
-        tokenAddress: selectedAsset.originalAddress,
-        amount: displayAmount,
-        gasConfig,
-      });
+      const txResponse = await performTransfer();
 
-      // TODO review and improve this data to be more precise and full of details
-      const tx: TransferTransactionData = {
-        type: "TransparentToShielded",
-        currentStep: TransferStep.Complete,
-        sourceAddress,
-        destinationAddress,
-        asset: selectedAsset.asset,
-        displayAmount,
-        rpc: txResponse.msg.payload.chain.rpcUrl,
-        chainId: txResponse.msg.payload.chain.chainId,
-        hash: txResponse.encodedTxData.txs[0]?.hash,
-        feePaid: txResponse.encodedTxData.wrapperTxProps.feeAmount,
-        resultTxHash: txResponse.encodedTxData.txs[0]?.innerTxHashes[0],
-        status: "success",
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      };
-      setTransaction(tx);
-      storeTransaction(tx);
-
-      setCurrentStepIndex(2);
+      if (txResponse) {
+        const txList = createTransferDataFromNamada(
+          txKind,
+          selectedAsset.asset,
+          rpcUrl,
+          txResponse
+        );
+
+        // Currently we don't have the option of batching transfer transactions
+        if (txList.length === 0) {
+          throw "Couldn't create TransferData object ";
+        }
+
+        const tx = txList[0];
+        setTransaction(tx);
+        storeTransaction(tx);
+      } else {
+        throw "Invalid transaction response";
+      }
     } catch (err) {
       setGeneralErrorMessage(err + "");
-      setCurrentStepIndex(0);
+      setTransaction(undefined);
     }
   };
 
@@ -187,8 +169,8 @@ export const MaspShield: React.FC = () => {
                 wallet: wallets.namada,
                 walletAddress: sourceAddress,
                 onChangeSelectedAsset,
-                amount,
-                onChangeAmount: setAmount,
+                amount: displayAmount,
+                onChangeAmount: setDisplayAmount,
               }}
               destination={{
                 chain: namadaChain as Chain,
@@ -198,7 +180,7 @@ export const MaspShield: React.FC = () => {
                 isShielded: true,
               }}
               gasConfig={gasConfig}
-              isSubmitting={performShieldTransfer.isPending}
+              isSubmitting={isPerformingTransfer}
               errorMessage={generalErrorMessage}
               onSubmitTransfer={onSubmitTransfer}
             />