@0xsquid/react-hooks 1.0.0

package/src/hooks/transaction/useExecuteTransaction.ts

@@ -0,0 +1,440 @@
+// import type { TransactionResponse } from "@0xsquid/sdk/dist/types/ethers";
+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 type { RouteResponse } from "@0xsquid/sdk/dist/types";
+import { ChainType } from "@0xsquid/sdk/dist/types";
+import { SigningCosmWasmClient } from "@cosmjs/cosmwasm-stargate";
+import type { TransactionReceipt } from "@ethersproject/abstract-provider";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { TxRaw } from "cosmjs-types/cosmos/tx/v1beta1/tx";
+import { ethers } from "ethers";
+import { Logger } from "ethers/lib/utils.js";
+import { useCallback, useMemo } from "react";
+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 {
+  getSourceExplorerTxUrl,
+  replaceTransactionAtNonce,
+  updateTransactionHistoryStatus,
+} from "@/services/internal/transactionService";
+
+import { useSquidChains } from "@/hooks//chains/useSquidChains";
+import { usePersistStore, useSquidStore } from "@/hooks/store/useSquidStore";
+import { useSwap } from "@/hooks/swap/useSwap";
+import { useEstimate } from "@/hooks/transaction/useEstimate";
+import { useGetRoute } from "@/hooks/transaction/useGetRoute";
+import { useGnosisContext } from "@/hooks/wallet/useGnosisContext";
+import { useMultiChainWallet } from "@/hooks/wallet/useMultiChainWallet";
+import { WidgetEvents } from "@/services/internal/eventService";
+
+enum ExecutionState {
+  NOT_ENOUGH_BALANCE = "NOT_ENOUGH_BALANCE",
+  NOT_CONNECTED = "NOT_CONNECTED",
+  READY = "READY",
+}
+
+export const useExecuteTransaction = (
+  route: ReturnType<typeof useGetRoute>
+) => {
+  const signer = useSigner();
+  const { cosmosSigner } = useCosmosContext();
+
+  const { chains } = useSquidChains();
+  const queryClient = useQueryClient();
+  const { fromPrice, toPrice, squid, currentTransaction, config } =
+    useSquidStore();
+
+  const { enoughBalanceToSwap } = useEstimate({
+    squidRoute: route,
+  });
+
+  const { connector: activeConnector } = useAccount();
+
+  const { fromChain, toChain, fromToken, toToken } = useSwap();
+  const { getGnosisTransactionHash } = useGnosisContext();
+
+  const { connectedAddress: sourceUserAddress } =
+    useMultiChainWallet(fromChain);
+
+  const isSameChainSwap = useMemo(
+    () => fromChain?.chainId === toChain?.chainId,
+    [fromChain?.chainId, toChain?.chainId]
+  );
+
+  /**
+   * States to see if the swap execution is possible or not based on swap & user params
+   * And if not possible, gives the reason
+   * TODO: The NOT_ENOUGH_BALANCE state could be fetch independently from the route response, only based on user fromAmount
+   */
+  const executionState = useMemo(() => {
+    if (!enoughBalanceToSwap) {
+      return ExecutionState.NOT_ENOUGH_BALANCE;
+    }
+
+    // TODO:; Add more states here
+
+    return ExecutionState.READY;
+  }, [enoughBalanceToSwap]);
+
+  /**
+   * This method is used to persist the transaction in local storage
+   * This way we can access user's transaction history
+   * TODO: This part will be fetched from the backend, using user address in the future
+   * @param txToPersist
+   * @param route
+   */
+  const persistTransaction = async (
+    txToPersist: TransactionParams,
+    route?: RouteResponse["route"]
+  ) => {
+    // Persisting the transaction in local storage
+    if (route) {
+      const previousHistoryList =
+        usePersistStore.getState().transactionsHistory ?? [];
+
+      const newHistoryElement: TransactionHistoryStore = {
+        ...txToPersist,
+        params: route.params,
+        estimate: route.estimate,
+      };
+
+      usePersistStore.setState({
+        transactionsHistory: [...previousHistoryList, newHistoryElement],
+      });
+    }
+  };
+
+  /**
+   * Set the transaction state in the store
+   * This is useful to access the latest transaction from any hook
+   */
+  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) {
+          const txParams = setTransactionState({
+            route,
+            txHash: newHash,
+            nonce: newNonce,
+            userAddress: sourceUserAddress,
+            status,
+            sourceStatus,
+            axelarUrl: undefined,
+          });
+
+          if (txParams) {
+            const newHistoryElement: TransactionHistoryStore = {
+              ...txParams,
+              params: route.params,
+              estimate: route.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, 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;
+
+      let hash = txResponse.hash;
+      if (activeConnector?.id === "safe") {
+        hash = await getGnosisTransactionHash(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 () => {
+      const sourceChain = chains?.find(
+        (chain) => chain.chainId == route.data?.params?.fromChain
+      );
+
+      if (sourceChain?.chainType === ChainType.COSMOS) {
+        return swapQueryCosmos.mutateAsync(route.data);
+      }
+      if (sourceChain?.chainType === ChainType.EVM) {
+        return swapQueryEvm.mutateAsync(route.data);
+      }
+
+      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 {
+    swapQuery,
+    currentTransaction,
+    fromToken,
+    toToken,
+    fromPrice,
+    toPrice,
+    toChain,
+    fromChain,
+    executionState,
+  };
+};

package/src/hooks/transaction/useExpress.ts

@@ -0,0 +1,46 @@
+import { useSquidStore } from "@/hooks/store/useSquidStore";
+import { useSwap } from "@/hooks/swap/useSwap";
+import { useUserParams } from "@/hooks/user/useUserParams";
+import { formatSeconds } from "@/services/internal/transactionService";
+import { useMemo } from "react";
+
+export const useEstimateExpress = () => {
+  const { expressSupportedForThisRoute } = useUserParams();
+  const { fromChain } = useSwap();
+  const { config } = useSquidStore();
+
+  const backendSupportingExpress = useMemo(
+    () => fromChain?.enableBoostByDefault,
+    [fromChain]
+  );
+
+  const expressActivatedUI = useMemo(
+    () =>
+      expressSupportedForThisRoute &&
+      config.enableExpress &&
+      backendSupportingExpress,
+    [
+      config.enableExpress,
+      backendSupportingExpress,
+      expressSupportedForThisRoute,
+    ]
+  );
+
+  const transactionTimeEstimate = useMemo(
+    () =>
+      expressSupportedForThisRoute && config.enableExpress
+        ? formatSeconds(20, "s", "min")
+        : formatSeconds(fromChain?.estimatedRouteDuration || 0, "s", "min"),
+    [
+      config.enableExpress,
+      fromChain?.estimatedRouteDuration,
+      expressSupportedForThisRoute,
+    ]
+  );
+
+  return {
+    expressSupportedForThisRoute,
+    transactionTimeEstimate,
+    expressActivatedUI,
+  };
+};

package/src/hooks/transaction/useGetRoute.ts

@@ -0,0 +1,145 @@
+import type {
+  DexName,
+  FallbackAddress,
+  RouteRequest,
+  Token,
+} from "@0xsquid/sdk/dist/types";
+
+import { osmosisChainId } from "@/core/constants";
+import { useCosmosContext } from "@/core/providers/CosmosProvider";
+import { useMutation } from "@tanstack/react-query";
+import { constants, utils } from "ethers";
+import { useCallback } from "react";
+
+import {
+  useSquidStore,
+  useSwapRoutePersistStore,
+} from "@/hooks/store/useSquidStore";
+import { useUserParams } from "@/hooks/user/useUserParams";
+
+export const useGetRoute = () => {
+  const { getCosmosAddressForChain, isConnected: isCosmosConnected } =
+    useCosmosContext();
+  const { squid, config } = useSquidStore();
+  const { swapRoute } = useSwapRoutePersistStore();
+  const { expressEnabled, gasEnabled } = useUserParams();
+
+  /**
+   * 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
+   */
+  return useMutation(
+    async ({
+      fromChain,
+      toChain,
+      fromToken,
+      toToken,
+      sourceUserAddress,
+      destinationAddress,
+      fromPrice,
+    }: {
+      fromChain: string;
+      toChain: string;
+      fromToken: Token;
+      toToken: Token;
+      sourceUserAddress: string;
+      destinationAddress: string;
+      fromPrice: string;
+    }) => {
+      const quoteOnly =
+        sourceUserAddress === undefined || destinationAddress === undefined;
+
+      const isEvmSwap = Number(fromChain) > 0 && Number(toChain) > 0;
+
+      const cosmosFallbackAddresses =
+        quoteOnly || isEvmSwap ? undefined : await getCosmosFallbackAddresses();
+
+      // TODO: Put RouteRequest back when it supports fallbackAddress
+      const params: RouteRequest = {
+        fromChain,
+        fromToken: fromToken.address,
+        fromAddress: sourceUserAddress ?? constants.AddressZero,
+        fromAmount: utils
+          .parseUnits(fromPrice?.toString() ?? "0", fromToken?.decimals)
+          .toString(),
+        toChain,
+        toToken: toToken.address,
+        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;
+    }
+  );
+};