@0xsquid/react-hooks 1.0.0

package/src/hooks/transaction/useTransaction.ts

@@ -0,0 +1,734 @@
+// import type { TransactionResponse } from "@0xsquid/sdk/dist/types/ethers";
+import type {
+  DexName,
+  FallbackAddress,
+  RouteRequest,
+  RouteResponse,
+  Token,
+} from "@0xsquid/sdk/dist/types";
+import { ChainType } from "@0xsquid/sdk/dist/types";
+
+import { osmosisChainId } from "@/core/constants";
+import { useCosmosContext } from "@/core/providers/CosmosProvider";
+import { keys } from "@/core/queries/queries-keys";
+import type { TransactionReplacedError } from "@/core/types/error";
+import { TransactionErrorType } from "@/core/types/error";
+import { SigningCosmWasmClient } from "@cosmjs/cosmwasm-stargate";
+import type { TransactionReceipt } from "@ethersproject/abstract-provider";
+import { TransactionStatus as GnosisTransactionStatus } from "@safe-global/safe-apps-sdk/dist/src/types";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { TxRaw } from "cosmjs-types/cosmos/tx/v1beta1/tx";
+import type { BigNumber } from "ethers";
+import { constants, ethers, utils } from "ethers";
+import { Logger } from "ethers/lib/utils.js";
+import { useCallback, useMemo } from "react";
+import type { Connector } from "wagmi";
+import { useAccount, useSigner } from "wagmi";
+
+import type {
+  TransactionHistoryStore,
+  TransactionParams,
+} from "@/core/types/transaction";
+import { TransactionStatus } from "@/core/types/transaction";
+import { getWorkingCosmosRpcUrl } from "@/services/external/rpcService";
+import { getTransactionError } from "@/services/internal/errorService";
+import {
+  getMainExplorerUrl,
+  getSourceExplorerTxUrl,
+  replaceTransactionAtNonce,
+  updateTransactionHistoryStatus,
+} from "@/services/internal/transactionService";
+
+import { useSquidChains } from "@/hooks//chains/useSquidChains";
+import {
+  usePersistStore,
+  useSquidStore,
+  useSwapRoutePersistStore,
+} from "@/hooks/store/useSquidStore";
+import { useSwap } from "@/hooks/swap/useSwap";
+import { useUserParams } from "@/hooks/user/useUserParams";
+import { useGnosisContext } from "@/hooks/wallet/useGnosisContext";
+import { useMultiChainWallet } from "@/hooks/wallet/useMultiChainWallet";
+import { WidgetEvents } from "@/services/internal/eventService";
+
+export const useTransaction = () => {
+  const signer = useSigner();
+  const {
+    cosmosSigner,
+    getCosmosAddressForChain,
+    isConnected: isCosmosConnected,
+  } = useCosmosContext();
+
+  const { chains } = useSquidChains();
+  const queryClient = useQueryClient();
+  const { fromPrice, toPrice, squid, currentTransaction, config } =
+    useSquidStore();
+  const { swapRoute } = useSwapRoutePersistStore();
+  const { connector: activeConnector } = useAccount();
+
+  const { fromChain, toChain, fromToken, toToken, destinationAddress } =
+    useSwap();
+
+  const { getGnosisSafeContext } = useGnosisContext();
+  const { expressEnabled, gasEnabled } = useUserParams();
+
+  const { connectedAddress: sourceUserAddress } =
+    useMultiChainWallet(fromChain);
+
+  const isSameChainSwap = useMemo(
+    () => fromChain?.chainId === toChain?.chainId,
+    [fromChain?.chainId, toChain?.chainId]
+  );
+
+  const mainExplorerUrl = useMemo(() => {
+    return getMainExplorerUrl(currentTransaction);
+  }, [currentTransaction]);
+
+  /**
+   * Get fallback addresses for cosmos chains
+   * This is needed by backend when a cosmos swap occurs between non coin118 chains
+   * The backend might need a coin118 address to send the funds to in case of failure for a swap happening between the two chains
+   */
+  const getCosmosFallbackAddresses = useCallback(async () => {
+    //  If not connected, user might have filled it manually
+    if (!isCosmosConnected) {
+      return swapRoute?.fallbackAddress
+        ? ([
+            {
+              address: swapRoute?.fallbackAddress,
+              coinType: 118,
+            },
+            // TODO: Temp parsing here, should be included in v2 sdk
+          ] as FallbackAddress[])
+        : undefined;
+    }
+
+    // the user is connected to cosmos, we can get the fallback address from the wallet
+    // We only need coin118, so taking osmosis hub address by default
+    const osmosisAddress = await getCosmosAddressForChain(
+      osmosisChainId.mainnet
+    );
+    if (!osmosisAddress) {
+      return undefined;
+    }
+
+    // Always used the one set by user (if any), otherwise use the derived osmo address
+    // only return something if one of the fallback address is defined
+    if (!!swapRoute?.fallbackAddress || !!osmosisAddress) {
+      return [
+        {
+          address: swapRoute?.fallbackAddress ?? osmosisAddress,
+          coinType: 118,
+        },
+      ] as FallbackAddress[];
+    }
+
+    return undefined;
+  }, [getCosmosAddressForChain, isCosmosConnected, swapRoute?.fallbackAddress]);
+
+  /**
+   * Fetching route data from the API
+   * These data will be used to trigger the transaction
+   * @returns {Route} Route data
+   */
+  const squidRoute = useQuery(
+    keys({
+      address: destinationAddress,
+      apiUrl: config.apiUrl,
+    }).transaction(
+      swapRoute,
+      fromPrice,
+      config.slippage,
+      config.infiniteApproval,
+      config.enableGetGasOnDestination,
+      config.enableExpress,
+      sourceUserAddress
+    ),
+    async () => {
+      const quoteOnly =
+        sourceUserAddress === undefined || destinationAddress === undefined;
+
+      const isEvmSwap =
+        fromChain?.chainType === ChainType.EVM &&
+        toChain?.chainType === ChainType.EVM;
+
+      const cosmosFallbackAddresses =
+        quoteOnly || isEvmSwap ? undefined : await getCosmosFallbackAddresses();
+
+      if (!!swapRoute) {
+        // TODO: Put RouteRequest back when it supports fallbackAddress
+        const params: RouteRequest = {
+          fromChain: String(swapRoute.fromChainId),
+          fromToken: swapRoute.fromTokenAddress ?? "",
+          fromAddress: sourceUserAddress ?? constants.AddressZero,
+          fromAmount: utils
+            .parseUnits(fromPrice?.toString() ?? "0", fromToken?.decimals)
+            .toString(),
+          toChain: swapRoute.toChainId! as string,
+          toToken: swapRoute.toTokenAddress!,
+          toAddress: destinationAddress ?? "",
+          quoteOnly:
+            sourceUserAddress === undefined || destinationAddress === undefined,
+          slippageConfig: {
+            // We set slippage to undefined because automode will be picked if slippage is undefined
+            // Slippage to 1 = auto mode
+            slippage: config.slippage === 1 ? undefined : config.slippage,
+            autoMode: 1,
+          },
+          enableBoost: expressEnabled,
+          prefer: config.preferDex as DexName[] | undefined,
+          receiveGasOnDestination: gasEnabled,
+          onChainQuoting: !!config.onChainQuoting,
+        };
+
+        // If the swap is involving cosmos chains, we need to add the fallback addresses (if any)
+        if (
+          cosmosFallbackAddresses &&
+          cosmosFallbackAddresses.length > 0 &&
+          cosmosFallbackAddresses[0].address
+        ) {
+          params.fallbackAddresses = cosmosFallbackAddresses;
+        }
+
+        const { route, requestId } = await squid!.getRoute({
+          ...params,
+        });
+
+        useSquidStore.setState({
+          currentRequestId: requestId,
+        });
+
+        return route;
+      }
+    },
+    {
+      enabled:
+        squid !== undefined &&
+        fromPrice !== undefined &&
+        fromPrice !== "0" &&
+        swapRoute?.toChainId !== undefined &&
+        swapRoute.toTokenAddress !== undefined,
+      // TODO: Check this, might be outside library
+      // && currentRoute?.path !== routes.transaction.path,
+      cacheTime: 60000,
+      staleTime: 20000,
+      refetchOnWindowFocus: (query) =>
+        Date.now() - query.state.dataUpdatedAt > 30000, // Update if older than 30 seconds, when window is focused
+      refetchIntervalInBackground: false, // Don't refetch when window is not focused
+      refetchInterval: 30000, // Refetch every 30 seconds
+    }
+  );
+
+  /**
+   * Checking if spending tokens is allowed for this source address
+   * On Success: storing the transaction
+   * On Error: Showing the error message if any
+   * @returns {boolean} approved
+   */
+  const routeApproved = useQuery(
+    keys({
+      address: sourceUserAddress,
+      apiUrl: config.apiUrl,
+    }).routeApproved(
+      swapRoute,
+      sourceUserAddress,
+      squidRoute.data as RouteResponse["route"]
+    ),
+    async () => {
+      try {
+        const { isApproved } = await squid!.isRouteApproved({
+          route: squidRoute.data!,
+          sender: sourceUserAddress!,
+        });
+
+        return isApproved;
+      } catch (error) {
+        return false;
+      }
+    },
+    {
+      enabled: !!squidRoute.data && !!sourceUserAddress,
+    }
+  );
+
+  // USDT has a very specific way of handling approvals
+  // ```
+  /// To change the approve amount you first have to reduce the addresses`
+  //  allowance to zero by calling `approve(_spender, 0)` if it is not
+  //  already 0 to mitigate the race condition described here:
+  //  https://github.com/ethereum/EIPs/issues/20#issuecomment-263524729
+  // ```
+  // This is why we had an unpredictable gas error for USDT approvals
+  // So it needs a custom gas limit
+  const approveSpecificTokenToZero = async (token: Token) => {
+    if (
+      signer.data &&
+      token.symbol.toLowerCase() === "usdt" &&
+      token.chainId === "1" &&
+      fromToken
+    ) {
+      const squidRouter = "0xce16F69375520ab01377ce7B88f5BA8C48F8D666";
+      const usdtContract = new ethers.Contract(
+        fromToken.address,
+        [
+          {
+            constant: false,
+            inputs: [
+              { name: "_spender", type: "address" },
+              { name: "_value", type: "uint256" },
+            ],
+            name: "approve",
+            outputs: [],
+            payable: false,
+            stateMutability: "nonpayable",
+            type: "function",
+          },
+          {
+            constant: true,
+            inputs: [
+              { name: "_owner", type: "address" },
+              { name: "_spender", type: "address" },
+            ],
+            name: "allowance",
+            outputs: [{ name: "remaining", type: "uint256" }],
+            payable: false,
+            stateMutability: "view",
+            type: "function",
+          },
+        ],
+        signer.data
+      );
+
+      // Get approval amount from usdt contract
+      const allowance = (await usdtContract.allowance(
+        sourceUserAddress,
+        squidRouter
+      )) as BigNumber;
+
+      // If allowance is greater than 0, set it to 0
+      if (allowance.gt(constants.Zero)) {
+        const approveTx = await usdtContract.approve(
+          squidRouter,
+          constants.Zero
+        );
+        await approveTx.wait();
+      }
+    }
+    return true;
+  };
+
+  /**
+   * Manually approve route if necessary
+   */
+  const approveRoute = useMutation(
+    keys({
+      address: sourceUserAddress,
+      apiUrl: config.apiUrl,
+    }).aproveRoute(fromToken?.address, squidRoute?.data?.params.fromAmount),
+    async () => {
+      try {
+        if (squidRoute.data && signer.data && fromToken) {
+          await approveSpecificTokenToZero(fromToken);
+
+          const approved = await squid?.approveRoute({
+            route: squidRoute.data,
+            signer: signer.data,
+            executionSettings: { infiniteApproval: config.infiniteApproval },
+          });
+
+          return approved;
+        }
+        return false;
+      } catch (error) {
+        // Keep the error in the console to debug future issues
+        console.error(error);
+        return false;
+      }
+    },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(
+          keys({
+            address: sourceUserAddress,
+            apiUrl: config.apiUrl,
+          }).routeApproved(swapRoute, sourceUserAddress, squidRoute.data)
+        );
+      },
+    }
+  );
+
+  /**
+   * There's a specific way to get the transaction hash for the safe connector
+   * SO if the app is being used inside the safe container, we need to use the safe sdk to get the tx hash
+   * @param connector
+   * @param hashReceived
+   * @returns
+   */
+  const getTransactionHash = async (
+    connector: Connector<any, any, any> | undefined,
+    hashReceived: string
+  ): Promise<string> => {
+    if (connector?.id === "safe") {
+      const safeSdk = await getGnosisSafeContext();
+
+      const tx = await safeSdk?.txs.getBySafeTxHash(hashReceived);
+      const status: GnosisTransactionStatus | undefined = tx?.txStatus;
+      if (
+        status !== GnosisTransactionStatus.FAILED &&
+        status !== GnosisTransactionStatus.SUCCESS &&
+        status !== GnosisTransactionStatus.CANCELLED
+      ) {
+        // Wait 2 seconds before checking the gnosis status again
+        // eslint-disable-next-line no-promise-executor-return
+        await new Promise((res) => setTimeout(res, 2000));
+        return getTransactionHash(connector, hashReceived);
+      }
+      return tx?.txHash ?? hashReceived;
+    }
+    return hashReceived;
+  };
+
+  const persistTransaction = async (txToPersist: TransactionParams) => {
+    // Persisting the transaction in local storage
+    if (squidRoute.data) {
+      const previousHistoryList =
+        usePersistStore.getState().transactionsHistory ?? [];
+
+      const newHistoryElement: TransactionHistoryStore = {
+        ...txToPersist,
+        params: squidRoute.data.params,
+        estimate: squidRoute.data.estimate,
+      };
+
+      usePersistStore.setState({
+        transactionsHistory: [...previousHistoryList, newHistoryElement],
+      });
+    }
+  };
+
+  const setTransactionState = useCallback(
+    ({
+      route,
+      txHash,
+      nonce,
+      status,
+      sourceStatus,
+      userAddress,
+      axelarUrl,
+    }: {
+      route?: RouteResponse["route"];
+      txHash: string;
+      nonce?: number;
+      status: TransactionStatus;
+      sourceStatus: TransactionStatus;
+      userAddress?: string;
+      axelarUrl?: string;
+    }) => {
+      if (route && route.transactionRequest) {
+        const { routeType } = route.transactionRequest;
+
+        const tx: TransactionParams = {
+          fromChain,
+          toChain,
+          routeType,
+          nonce,
+          transactionId: txHash,
+          status,
+          sourceStatus,
+          timestamp: Date.now(),
+          fromAddress: userAddress,
+          sourceTxExplorerUrl: getSourceExplorerTxUrl(fromChain, txHash),
+          sourceExplorerImgUrl: fromChain?.chainIconURI,
+          axelarUrl,
+        };
+
+        useSquidStore.setState({
+          currentTransaction: tx,
+        });
+
+        return tx;
+      }
+      return undefined;
+    },
+    [fromChain, toChain]
+  );
+
+  const swapQueryCosmos = useMutation(
+    async (route?: RouteResponse["route"]) => {
+      const chainData = chains.find(
+        (c) => c.chainId === route?.params.fromChain
+      );
+
+      if (cosmosSigner && chainData) {
+        try {
+          const rpc = await getWorkingCosmosRpcUrl(chainData);
+          const signingClient = await SigningCosmWasmClient.connectWithSigner(
+            rpc,
+            cosmosSigner
+          );
+          const signerAddress = (await cosmosSigner.getAccounts())[0].address;
+
+          if (signerAddress && signingClient && route) {
+            const tx = (await squid?.executeRoute({
+              signer: signingClient as any,
+              signerAddress,
+              route,
+              executionSettings: {
+                infiniteApproval: config.infiniteApproval,
+              },
+            })) as TxRaw;
+
+            // set the tx state to loading, as soon as user signed the tx
+            setTransactionState({
+              txHash: "", // We don't have the hash yet
+              route,
+              status: TransactionStatus.ONGOING,
+              sourceStatus: TransactionStatus.ONGOING,
+            });
+
+            // broadcast the signed tx to get hash and listen to events
+            const response = await signingClient.broadcastTx(
+              TxRaw.encode(tx).finish()
+            );
+
+            const hash = response.transactionHash;
+
+            // Dispatch event so it can be listened from outside the widget
+            WidgetEvents.getInstance().dispatchSwapExecuteCall(route, hash);
+
+            const txParams: TransactionParams | undefined = setTransactionState(
+              {
+                route,
+                txHash: hash,
+                userAddress: sourceUserAddress,
+                status: TransactionStatus.ONGOING,
+                sourceStatus: TransactionStatus.ONGOING,
+                axelarUrl: undefined,
+              }
+            );
+            if (txParams) {
+              persistTransaction(txParams);
+            }
+
+            return response.code === 0;
+          }
+        } catch (error) {
+          console.log(error);
+
+          const castedError = (error as { message: string | undefined }) ?? {};
+          if (castedError.message?.includes("Request rejected")) {
+            throw new Error(castedError.message);
+          }
+        }
+      }
+      throw new Error("Need all parameters");
+    }
+  );
+
+  // If the transaction is replaced, we need to update the transaction hash
+  // Transaction replaced can mean that the user has speed up the transaction for example
+  // Could also be cancelled
+  const handleTransactionReplacementError = useCallback(
+    async ({
+      error,
+      route,
+      status,
+      sourceStatus,
+      userAddress,
+      axelarUrl,
+    }: {
+      error: any;
+      route?: RouteResponse["route"];
+      status: TransactionStatus;
+      sourceStatus: TransactionStatus;
+      userAddress?: string;
+      axelarUrl?: string;
+    }): Promise<TransactionReceipt> => {
+      if (route && error.code === Logger.errors.TRANSACTION_REPLACED) {
+        const txReplacementError = error as TransactionReplacedError;
+
+        const { hash: newHash, nonce: newNonce } =
+          txReplacementError.replacement;
+
+        if (route.transactionRequest && squidRoute.data) {
+          const txParams = setTransactionState({
+            route,
+            txHash: newHash,
+            nonce: newNonce,
+            userAddress: sourceUserAddress,
+            status,
+            sourceStatus,
+            axelarUrl: undefined,
+          });
+
+          if (txParams) {
+            const newHistoryElement: TransactionHistoryStore = {
+              ...txParams,
+              params: squidRoute.data.params,
+              estimate: squidRoute.data.estimate,
+            };
+
+            // Need to store the new transaction hash on the previous transaction
+            usePersistStore.setState({
+              transactionsHistory: replaceTransactionAtNonce(
+                newNonce,
+                sourceUserAddress!,
+                usePersistStore.getState().transactionsHistory,
+                newHistoryElement
+              ),
+            });
+          }
+        }
+
+        try {
+          const response = await txReplacementError.replacement.wait();
+          return response;
+        } catch (replacementError) {
+          // Maybe the transaction was replaced again
+          // recursive call
+          return handleTransactionReplacementError({
+            error,
+            route,
+            status,
+            sourceStatus,
+            userAddress,
+            axelarUrl,
+          });
+        }
+      } else {
+        throw error;
+      }
+    },
+    [
+      setTransactionState,
+      sourceUserAddress,
+      squidRoute.data,
+      squid?.axelarscanURL,
+    ]
+  );
+
+  const swapQueryEvm = useMutation(async (route?: RouteResponse["route"]) => {
+    if (route && !!squid && signer.isSuccess && signer.data) {
+      const txResponse = (await squid.executeRoute({
+        signer: signer.data,
+        route,
+        executionSettings: {
+          infiniteApproval: config.infiniteApproval,
+        },
+      })) as unknown as ethers.providers.TransactionResponse;
+
+      const hash = await getTransactionHash(activeConnector, txResponse.hash);
+
+      // Dispatch event so it can be listened from outside the widget
+      WidgetEvents.getInstance().dispatchSwapExecuteCall(route, hash);
+
+      if (route.transactionRequest) {
+        const txParams: TransactionParams | undefined = setTransactionState({
+          route,
+          txHash: hash,
+          nonce: txResponse.nonce,
+          userAddress: sourceUserAddress,
+          status: TransactionStatus.INITIAL_LOADING,
+          sourceStatus: TransactionStatus.ONGOING,
+          axelarUrl: undefined,
+        });
+        if (txParams) {
+          persistTransaction(txParams);
+        }
+      }
+
+      try {
+        const response = await txResponse.wait();
+        return response;
+      } catch (error: any) {
+        return handleTransactionReplacementError({
+          error,
+          route,
+          status: TransactionStatus.INITIAL_LOADING,
+          sourceStatus: TransactionStatus.ONGOING,
+          userAddress: sourceUserAddress,
+          axelarUrl: undefined,
+        });
+      }
+    }
+    throw new Error("Need all parameters");
+  });
+
+  /**
+   * Execute cross chain swap with selected tokens
+   * getRoute should be called before this mutation
+   */
+  const swapQuery = useMutation(
+    async (route?: RouteResponse["route"]) => {
+      const sourceChain = chains?.find(
+        (chain) => chain.chainId == route?.params?.fromChain
+      );
+
+      if (sourceChain?.chainType === ChainType.COSMOS) {
+        return swapQueryCosmos.mutateAsync(route);
+      }
+      if (sourceChain?.chainType === ChainType.EVM) {
+        return swapQueryEvm.mutateAsync(route);
+      }
+
+      throw new Error("Invalid parameters or chain not found");
+    },
+    {
+      onError: (error: any) => {
+        const { currentTransaction: currentTx } = useSquidStore.getState();
+        const errorObject = getTransactionError(error);
+        useSquidStore.setState({
+          currentTransaction: {
+            ...currentTx!,
+            status: TransactionStatus.ERROR,
+            sourceStatus: TransactionStatus.ERROR,
+            error: errorObject,
+          },
+        });
+        if (
+          currentTx?.transactionId &&
+          errorObject?.type === TransactionErrorType.CALL_EXCEPTION
+        ) {
+          usePersistStore.setState({
+            transactionsHistory: updateTransactionHistoryStatus(
+              currentTransaction?.transactionId,
+              TransactionStatus.ERROR,
+              usePersistStore.getState().transactionsHistory,
+              undefined
+            ),
+          });
+        }
+      },
+      onSuccess: () => {
+        const { currentTransaction: currentTx } = useSquidStore.getState();
+
+        queryClient.invalidateQueries(keys({}).balances());
+
+        useSquidStore.setState({
+          currentTransaction: {
+            ...currentTx!,
+            sourceStatus: TransactionStatus.SUCCESS,
+            status: isSameChainSwap
+              ? TransactionStatus.SUCCESS
+              : TransactionStatus.ONGOING,
+          },
+        });
+      },
+    }
+  );
+
+  return {
+    routeApproved,
+    approveRoute,
+    swapQuery,
+    currentTransaction,
+    fromToken,
+    toToken,
+    squidRoute,
+    fromPrice,
+    toPrice,
+    toChain,
+    fromChain,
+    mainExplorerUrl,
+  };
+};