@0xsquid/react-hooks 1.0.0

package/src/hooks/user/useUserParams.ts

@@ -0,0 +1,63 @@
+import { useSquidStore } from "@/hooks/store/useSquidStore";
+import { useSwap } from "@/hooks/swap/useSwap";
+import { ChainType } from "@0xsquid/sdk/dist/types";
+import { useMemo } from "react";
+
+export const useUserParams = () => {
+  const { config } = useSquidStore();
+  const { fromToken, toToken, toChain, fromChain } = useSwap();
+
+  //   =============
+  //       GAS
+  //   =============
+  const getGasOnDestSupportedForThisRoute = useMemo(
+    () =>
+      // Not supporting get gas on dest for same chains
+      fromChain?.chainId !== toChain?.chainId &&
+      // If the destination chain is cosmos, we don't support getting gas there
+      toChain?.chainType !== ChainType.COSMOS &&
+      // Not supporting get gas on dest for same tokens (bridge)
+
+      ((fromToken?.subGraphIds?.some(
+        (sgi) => !!toToken?.subGraphIds?.includes(sgi)
+      ) &&
+        toToken?.subGraphIds?.some(
+          (sgi) => !!fromToken?.subGraphIds?.includes(sgi)
+        )) ||
+        // Except for uusdc -> uusdc
+        (fromToken?.subGraphIds?.includes("uusdc") &&
+          toToken?.subGraphIds?.includes("uusdc"))),
+    [
+      fromChain?.chainId,
+      fromToken?.subGraphIds,
+      toChain?.chainId,
+      toToken?.subGraphIds,
+      toChain?.chainType,
+    ]
+  );
+
+  const gasEnabled = useMemo(
+    () => config.enableGetGasOnDestination && getGasOnDestSupportedForThisRoute,
+    [config.enableGetGasOnDestination, getGasOnDestSupportedForThisRoute]
+  );
+
+  //   =============
+  //       BOOST
+  //   =============
+  const expressSupportedForThisRoute = useMemo(
+    () => toChain?.chainType !== ChainType.COSMOS,
+    [toChain?.chainType]
+  );
+
+  const expressEnabled = useMemo(
+    () => expressSupportedForThisRoute && config.enableExpress,
+    [config.enableExpress, expressSupportedForThisRoute]
+  );
+
+  return {
+    gasEnabled,
+    expressEnabled,
+    expressSupportedForThisRoute,
+    getGasOnDestSupportedForThisRoute,
+  };
+};

package/src/hooks/wallet/useAddToken.ts

@@ -0,0 +1,53 @@
+import type { ChainData, Token } from "@0xsquid/sdk/dist/types";
+import { ChainType } from "@0xsquid/sdk/dist/types";
+import { useMutation } from "@tanstack/react-query";
+import { useAccount, useNetwork, useSwitchNetwork } from "wagmi";
+
+export const useAddToken = (
+  chainToCompare: ChainData | undefined,
+  tokenToCompare: Token | undefined
+) => {
+  const { chain: currentEvmChain } = useNetwork();
+  const { connector } = useAccount();
+
+  const { switchNetworkAsync } = useSwitchNetwork({
+    throwForSwitchChainNotSupported: true,
+  });
+
+  /**
+   * Add token to wallet
+   */
+  const addToken = useMutation(async (tokenToAdd: Token | void) => {
+    const token = tokenToAdd ?? tokenToCompare;
+    if (token && chainToCompare?.chainType === ChainType.EVM) {
+      const provider = await connector?.getProvider();
+
+      // Switch network if needed
+      if (currentEvmChain?.id.toString() !== token?.chainId) {
+        await switchNetworkAsync?.(+token.chainId);
+        // Metamask is not popping the second modal if we don't wait a bit
+        // eslint-disable-next-line no-promise-executor-return
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+      // Add token to wallet
+      provider.request({
+        method: "wallet_watchAsset",
+        params: {
+          type: "ERC20",
+          options: {
+            address: token?.address,
+            symbol: token?.symbol,
+            decimals: token?.decimals,
+            image: token?.logoURI,
+          },
+        },
+      });
+    }
+    // TODO: Implement keplr add token
+    return false;
+  });
+
+  return {
+    addToken,
+  };
+};

package/src/hooks/wallet/useAutoConnect.ts

@@ -0,0 +1,56 @@
+import { PriorityConnectors } from "@/core/constants";
+import { useEffect } from "react";
+import { useConnect } from "wagmi";
+
+const PRIORITY_CONNECTOR_ID = [PriorityConnectors.Safe];
+
+const WAGMI_LOCAL_STORAGE_WALLET_ID = "wagmi.wallet";
+
+/**
+ * Auto connect to Safe provider if it's present
+ * Safe will always be the priority connector
+ * Because if it's present, this means the user is on a Safe app iframe
+ */
+export const useAutoConnect = () => {
+  const { connect, connectors } = useConnect();
+
+  const wagmiLocalStorageWalletID = localStorage.getItem(
+    WAGMI_LOCAL_STORAGE_WALLET_ID
+  );
+
+  useEffect(() => {
+    const queryParameters = new URLSearchParams(window.location.search);
+    // TODO: At the moment gnosis was published without the embed parameter in the manifest,
+    // but we should ask gnosis to change our app url to https://app.squidrouter.com/?embed="safe"
+    // So we could remove the priority connector array and just use the embed parameter
+    const embedType = queryParameters.get("embed") as PriorityConnectors;
+    let priorityConnector: any;
+
+    if (embedType) {
+      priorityConnector = connectors.find((c) => c.id === embedType);
+    } else {
+      priorityConnector = connectors.find(
+        (c) =>
+          PRIORITY_CONNECTOR_ID.includes(c.id as PriorityConnectors) && c.ready
+      );
+    }
+
+    // Connect priority provider if it's present
+    // Otherwise, connect to the last wallet used if authorized
+    if (priorityConnector) {
+      connect({ connector: priorityConnector });
+    } else if (wagmiLocalStorageWalletID) {
+      const wagmiLocalStorageWalletConnector = connectors.find(
+        (c) => c.id === JSON.parse(wagmiLocalStorageWalletID) && c.ready
+      );
+
+      // If we do not check this, the wallet will try to connect even if the user disconnected on purpose
+      // Checking this will prevent the wallet to popup at each page refresh if the user is disconnected
+      wagmiLocalStorageWalletConnector?.isAuthorized().then((isAuthorized) => {
+        if (isAuthorized) {
+          connect({ connector: wagmiLocalStorageWalletConnector });
+        }
+      });
+    }
+  }, [connect, connectors]);
+};

package/src/hooks/wallet/useGnosisContext.ts

@@ -0,0 +1,84 @@
+import { useSwapRoutePersistStore } from "@/hooks/store/useSquidStore";
+import { useSwap } from "@/hooks/swap/useSwap";
+import { useMultiChainWallet } from "@/hooks/wallet/useMultiChainWallet";
+import SafeAppsSDK from "@safe-global/safe-apps-sdk";
+import { TransactionStatus as GnosisTransactionStatus } from "@safe-global/safe-apps-sdk/dist/src/types";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useAccount } from "wagmi";
+
+export const useGnosisContext = () => {
+  const { connector } = useAccount();
+  const { fromChain } = useSwap();
+  const { swapRoute } = useSwapRoutePersistStore();
+  const { connectedAddress } = useMultiChainWallet(fromChain);
+  const [isGnosisContext, setisGnosisContext] = useState(false);
+
+  /**
+   * Method that will be used to send transaction
+   * TODO: could have loaded the sdk when app load and stored globally
+   */
+  const getGnosisSafeContext = useCallback(async () => {
+    const appsSdk = new SafeAppsSDK();
+    const safe = await appsSdk.safe.getInfo();
+    const isSafeContext =
+      safe.chainId !== undefined &&
+      safe.safeAddress !== undefined &&
+      connector?.id === "safe";
+
+    setisGnosisContext(isSafeContext);
+
+    if (isSafeContext) return appsSdk;
+    return undefined;
+  }, [connector]);
+
+  useEffect(() => {
+    getGnosisSafeContext();
+  }, [connector]);
+
+  /**
+   * Check if we are in a Gnosis Safe Context
+   * And if source wallet address = destination address
+   * If swapRoute.destinationAddress is not defined, it means that it's the same from the source
+   */
+  const isSameAddressAndGnosisContext = useMemo(() => {
+    const destAddressSameAsSource =
+      connectedAddress === swapRoute?.destinationAddress ||
+      swapRoute?.destinationAddress === undefined;
+
+    return isGnosisContext && destAddressSameAsSource;
+  }, [connectedAddress, swapRoute, isGnosisContext]);
+
+  /**
+   * There's a specific way to get the transaction hash for the safe connector
+   * Using then initial hash received by the transaction, we can get the real hash
+   * @param hashReceived
+   * @returns
+   */
+  const getGnosisTransactionHash = async (
+    initialHash: string
+  ): Promise<string> => {
+    const safeSdk = await getGnosisSafeContext();
+
+    const tx = await safeSdk?.txs.getBySafeTxHash(initialHash);
+    const status: GnosisTransactionStatus | undefined = tx?.txStatus;
+    if (
+      status !== GnosisTransactionStatus.FAILED &&
+      status !== GnosisTransactionStatus.SUCCESS &&
+      status !== GnosisTransactionStatus.CANCELLED
+    ) {
+      // Workaround, Wait 2 seconds before checking the gnosis status again
+      // TODO: There might be a better way to do this
+      // eslint-disable-next-line no-promise-executor-return
+      await new Promise((res) => setTimeout(res, 2000));
+      return getGnosisTransactionHash(initialHash);
+    }
+    return tx?.txHash ?? initialHash;
+  };
+
+  return {
+    getGnosisSafeContext,
+    isSameAddressAndGnosisContext,
+    isGnosisContext,
+    getGnosisTransactionHash,
+  };
+};

package/src/hooks/wallet/useIntegratorContext.ts

@@ -0,0 +1,44 @@
+import { PriorityConnectors } from "@/core/constants";
+import { useGnosisContext } from "@/hooks/wallet/useGnosisContext";
+import { useMemo } from "react";
+
+export const useIntegratorContext = () => {
+  const { isGnosisContext } = useGnosisContext();
+  /**
+   * Check if the wallet is handled externally
+   * Example: Ledger or Gnosis Safe
+   * Either by the embed parameter or by Gnosis context
+   */
+  const walletHandledExternally: boolean = useMemo(() => {
+    const embedTypesHavingExternalWallet: PriorityConnectors[] = [
+      PriorityConnectors.LedgerLive,
+      PriorityConnectors.Safe,
+    ];
+    const queryParameters = new URLSearchParams(window.location.search);
+    const embedType = queryParameters.get("embed") as PriorityConnectors;
+
+    return (
+      isGnosisContext || embedTypesHavingExternalWallet.includes(embedType)
+    );
+  }, [isGnosisContext]);
+
+  const isEmbed = useMemo(() => {
+    const queryParameters = new URLSearchParams(window.location.search);
+    const embedType = queryParameters.get("embed") as PriorityConnectors;
+    return !!embedType;
+  }, []);
+
+  /**
+   * It's important to know if we can use certain features such as
+   * the clipboard reading
+   */
+  const widgetInIframe = useMemo(() => {
+    try {
+      return window.self !== window.top;
+    } catch (e) {
+      return false;
+    }
+  }, []);
+
+  return { walletHandledExternally, isEmbed, widgetInIframe };
+};

package/src/hooks/wallet/useMultiChainWallet.ts

@@ -0,0 +1,146 @@
+import { useCosmosContext } from "@/core/providers/CosmosProvider";
+import type { AddEthereumChainParameter } from "@/core/types/wallet";
+import { useCosmosForChain } from "@/hooks/cosmos/useCosmosForChain";
+import { formatWalletAddress } from "@/services/internal/walletService";
+import type { ChainData } from "@0xsquid/sdk/dist/types";
+import { ChainType } from "@0xsquid/sdk/dist/types";
+import { useMutation } from "@tanstack/react-query";
+import { AddChainError, UserRejectedRequestError } from "@wagmi/core";
+import { ethers } from "ethers";
+import { useMemo } from "react";
+import {
+  ChainNotConfiguredError,
+  SwitchChainError,
+  useAccount,
+  useNetwork,
+  useSwitchNetwork,
+} from "wagmi";
+
+export const useMultiChainWallet = (chainToCompare: ChainData | undefined) => {
+  const { chain: currentEvmChain } = useNetwork();
+  const { isConnected: isEvmConnected, connector, address } = useAccount();
+  const { isConnected: cosmosIsConnected } = useCosmosContext();
+  const { cosmosAddress } = useCosmosForChain(chainToCompare);
+
+  const { switchNetworkAsync } = useSwitchNetwork({
+    throwForSwitchChainNotSupported: true,
+  });
+
+  /**
+   * Get connected address, depends on chainType
+   */
+  const connectedAddress = useMemo(() => {
+    switch (chainToCompare?.chainType) {
+      case ChainType.EVM:
+        return address;
+      case ChainType.COSMOS:
+        return cosmosAddress;
+      default:
+        return address;
+    }
+  }, [address, chainToCompare?.chainType, cosmosAddress]);
+
+  const parsedAddress = useMemo(
+    () => formatWalletAddress(connectedAddress),
+    [connectedAddress]
+  );
+
+  /**
+   * Change current network for desired chain
+   */
+  const changeNetwork = useMutation(
+    async () => {
+      // throw for tenderly fork chain addition
+      if (chainToCompare?.rpc.includes("tenderly")) {
+        throw new SwitchChainError("Add tenderly chain");
+      }
+
+      if (chainToCompare?.chainType === ChainType.EVM) {
+        await switchNetworkAsync?.(+chainToCompare.chainId);
+      }
+      // Implement keplr change network
+      // Looks like there are no method to do that at the moment
+      return false;
+    },
+    {
+      onError: async (error: any) => {
+        if (error instanceof UserRejectedRequestError) {
+          return;
+        }
+        if (
+          (error instanceof ChainNotConfiguredError ||
+            error instanceof SwitchChainError ||
+            error instanceof AddChainError) &&
+          chainToCompare
+        ) {
+          const provider = await connector?.getProvider();
+          const chainName = chainToCompare.rpc.includes("tenderly")
+            ? `${chainToCompare.networkName} Tenderly fork`
+            : chainToCompare.networkName;
+          const chainParameters: AddEthereumChainParameter = {
+            chainId: ethers.utils.hexValue(
+              parseInt(chainToCompare.chainId, 10)
+            ),
+            chainName,
+            nativeCurrency: chainToCompare.nativeCurrency,
+            rpcUrls: [chainToCompare.rpc],
+            blockExplorerUrls: chainToCompare.blockExplorerUrls,
+            iconUrls: [chainToCompare.chainIconURI],
+          };
+          provider.request({
+            method: "wallet_addEthereumChain",
+            params: [chainParameters],
+          });
+        }
+      },
+    }
+  );
+
+  /**
+   * Handle multiple chains
+   */
+  const networkConnected = useMemo(() => {
+    switch (chainToCompare?.chainType) {
+      case ChainType.EVM:
+        return isEvmConnected;
+      case ChainType.COSMOS:
+        return cosmosIsConnected;
+      default:
+        return isEvmConnected;
+    }
+  }, [isEvmConnected, chainToCompare, cosmosIsConnected]);
+
+  /**
+   * Checks if Network is connected and with the right chain
+   */
+  const networkConnectedOnRightChain = useMemo(() => {
+    if (chainToCompare?.chainType === ChainType.EVM) {
+      // tenderly validation based on rpc
+      if (
+        currentEvmChain?.rpcUrls?.default?.http?.length &&
+        currentEvmChain?.rpcUrls?.default?.http[0].includes("tenderly")
+      ) {
+        return (
+          isEvmConnected &&
+          currentEvmChain?.rpcUrls?.default?.http[0].toLowerCase() ===
+            chainToCompare.rpc.toLowerCase()
+        );
+      }
+
+      return (
+        isEvmConnected &&
+        currentEvmChain?.id.toString() === chainToCompare.chainId
+      );
+    }
+    // TODO: Implement keplr check
+    return true;
+  }, [isEvmConnected, currentEvmChain, chainToCompare]);
+
+  return {
+    changeNetwork,
+    networkConnected,
+    networkConnectedOnRightChain,
+    connectedAddress,
+    parsedAddress,
+  };
+};

package/src/hooks/wallet/useWallet.ts

@@ -0,0 +1,86 @@
+import { wallets } from "@/core/constants";
+import { useCosmosContext } from "@/core/providers/CosmosProvider";
+import type { Wallet } from "@/core/types/wallet";
+import { useSquidChains } from "@/hooks/chains/useSquidChains";
+import { useSquidRouter } from "@/hooks/webapp-router/useSquidRouter";
+import {
+  formatChainsForWagmi,
+  redirectExtensionStoreIfNotInstalled,
+} from "@/services/internal/walletService";
+import type { ChainData } from "@0xsquid/sdk/dist/types";
+import { ChainType } from "@0xsquid/sdk/dist/types";
+import { useMemo } from "react";
+import { useAccount, useConnect, useDisconnect } from "wagmi";
+
+export const useWallet = (chain: ChainData | undefined) => {
+  const { connector: activeConnector, isConnected: isEvmConnected } =
+    useAccount();
+
+  const { disconnectAsync: disconnectEvm } = useDisconnect();
+  const {
+    isConnected: cosmosIsConnected,
+    connectCosmos,
+    cosmosConnectedWallet,
+  } = useCosmosContext();
+  const { connectAsync } = useConnect();
+  const { previousRoute } = useSquidRouter();
+  const { chains } = useSquidChains();
+
+  const connectWallet = async (
+    wallet: Wallet,
+    redirect?: boolean,
+    direction?: "from" | "to"
+  ) => {
+    redirectExtensionStoreIfNotInstalled(wallet);
+
+    try {
+      if (wallet && wallet.connector && wallet.type === ChainType.EVM) {
+        await disconnectEvm();
+        await connectAsync({
+          connector: wallet.connector(formatChainsForWagmi(chains)),
+        });
+      } else if (wallet.type === ChainType.COSMOS && chain) {
+        await connectCosmos?.mutateAsync({ chain, wallet, direction });
+      }
+      if (redirect) {
+        previousRoute();
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  /**
+   * Get the connected wallet object
+   * @returns {Wallet | undefined}
+   */
+  const currentWallet = useMemo(() => {
+    if (chain?.chainType === ChainType.EVM) {
+      if (activeConnector?.id && isEvmConnected) {
+        const activeWallet = wallets.find(
+          (w) => w.connectorId === activeConnector.id
+        );
+        return activeWallet;
+      }
+    }
+    if (chain?.chainType === ChainType.COSMOS) {
+      if (cosmosIsConnected) {
+        return wallets.find(
+          (w) => w.connectorId === cosmosConnectedWallet?.connectorId
+        );
+      }
+    }
+    return undefined;
+  }, [
+    activeConnector?.id,
+    chain?.chainType,
+    cosmosConnectedWallet?.connectorId,
+    cosmosIsConnected,
+    isEvmConnected,
+  ]);
+
+  return {
+    currentWallet,
+    connectWallet,
+  };
+};

package/src/hooks/webapp-router/useSquidRouter.ts

@@ -0,0 +1,42 @@
+import { WidgetRoute } from "@/core/types/route";
+import { useSquidRouterStore } from "@/hooks/store/useSquidStore";
+
+export const useSquidRouter = () => {
+  const { history } = useSquidRouterStore();
+
+  const switchRoute = (
+    route: WidgetRoute,
+    params?: { [key: string]: any | undefined } | undefined,
+    addRouteToHistory = true
+  ) => {
+    const currentHistory = useSquidRouterStore.getState().history;
+    if (addRouteToHistory) {
+      useSquidRouterStore.setState({
+        history: [...currentHistory, { route, params }],
+      });
+    } else {
+      useSquidRouterStore.setState({
+        history: [...currentHistory.slice(0, -1), { route, params }],
+      });
+    }
+  };
+
+  const previousRoute = () => {
+    const currentHistory = useSquidRouterStore.getState().history;
+    currentHistory.pop();
+
+    useSquidRouterStore.setState({
+      history: currentHistory,
+    });
+  };
+
+  const currentRoute = history[history.length - 1].route;
+  const currentRouteParams = history[history.length - 1].params;
+
+  return {
+    currentRoute,
+    switchRoute,
+    previousRoute,
+    currentRouteParams,
+  };
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+// src/index.tsx
+export * from "./hooks";
+export * from "./provider";
+export * from "./core";
+export * from "./services";

package/src/provider/index.tsx

@@ -0,0 +1,105 @@
+import { wallets } from "@/core/constants";
+import { CosmosProvider } from "@/core/providers/CosmosProvider";
+import { defaultOptions } from "@/core/queries/react-query-config";
+import { useSquidStore } from "@/hooks/store/useSquidStore";
+import { getConfigWithDefaults } from "@/services/internal/configService";
+import { formatChainsForWagmi } from "@/services/internal/walletService";
+import { Squid } from "@0xsquid/sdk";
+import { ChainData, ChainType } from "@0xsquid/squid-types";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createContext, useEffect, useState } from "react";
+import React from "react";
+import { WagmiConfig, configureChains, createClient } from "wagmi";
+import { jsonRpcProvider } from "wagmi/providers/jsonRpc";
+
+interface Config {
+  integratorId: string;
+}
+
+interface ISdkProviderProps {
+  children: React.ReactNode;
+  config: Config;
+}
+
+const SquidContext = createContext(undefined);
+
+const verifyIntegratorIdValidity = (integratorId: string) => {
+  if (!integratorId) {
+    throw new Error("Integrator ID is required");
+  }
+};
+
+export const SquidProvider: React.FC<ISdkProviderProps> = ({
+  children,
+  config,
+}: ISdkProviderProps) => {
+  console.log("SquidProvider");
+  verifyIntegratorIdValidity(config.integratorId);
+
+  const queryClient = new QueryClient({ defaultOptions });
+  const [wagmiClient, setWagmiClient] = useState<any>(null);
+
+  /**
+   * Initialize Wagmi client
+   * @param chains
+   */
+  const initWagmiClient = (chains: ChainData[]) => {
+    const { provider, chains: wagmiChains } = configureChains(
+      formatChainsForWagmi(chains),
+      [
+        jsonRpcProvider({
+          rpc: (chain) => ({
+            http: chain.rpcUrls.default.http[0] ?? "",
+            webSocket: undefined,
+          }),
+        }),
+      ]
+    );
+
+    // Get formatted connectors from Squid supported wallets
+    const evmWalletConnectors = wallets
+      .filter((w) => w.type === ChainType.EVM)
+      .map((w) => w.connector?.(wagmiChains));
+
+    const wClient = createClient({
+      persister: null,
+      provider,
+      connectors: [...evmWalletConnectors],
+    });
+
+    setWagmiClient(wClient);
+  };
+
+  // Initialize Squid SDK & wagmi client
+  useEffect(() => {
+    const initializeSdk = async () => {
+      const squid = new Squid({
+        integratorId: config.integratorId,
+        baseUrl: "https://v2.api.squidrouter.com",
+      });
+      await squid.init();
+
+      useSquidStore.setState((_) => ({
+        config: getConfigWithDefaults({
+          integratorId: config.integratorId,
+        }),
+        squid,
+      }));
+      initWagmiClient(squid.chains);
+    };
+
+    initializeSdk();
+  }, []);
+
+  return (
+    <SquidContext.Provider value={undefined}>
+      <QueryClientProvider client={queryClient}>
+        {wagmiClient && (
+          <WagmiConfig client={wagmiClient}>
+            <CosmosProvider>{children}</CosmosProvider>
+          </WagmiConfig>
+        )}
+      </QueryClientProvider>
+    </SquidContext.Provider>
+  );
+};

package/src/react-app-env.d.ts

@@ -0,0 +1,2 @@
+declare module "*.png";
+declare module "*.svg";