[SPE-246] Add support for EVM wallets, separate source and destination wallets

jest.setup.js

@@ -1,3 +1,6 @@
 import "@testing-library/jest-dom/extend-expect";
 
 global.ResizeObserver = require("resize-observer-polyfill");
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+global.TextEncoder = require("util").TextEncoder;

next.config.js

@@ -21,6 +21,16 @@ const nextConfig = {
           "@buf/cosmos_cosmos-sdk.bufbuild_es",
           "@buf/evmos_evmos.bufbuild_es",
           "@buf/cosmos_ibc.bufbuild_es",
+          "wagmi",
+          "@tanstack/query-sync-storage-persister",
+          "@tanstack/react-query",
+          "@tanstack/query-core",
+          "@tanstack/react-query-persist-client",
+          "@tanstack/query-persist-client-core",
+          "@wagmi/core",
+          "@wagmi/connectors",
+          "viem",
+          "abitype",
         ]
       : [],
 };

package.json

@@ -39,7 +39,7 @@
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.4",
     "@radix-ui/react-tooltip": "^1.0.6",
-    "@skip-router/core": "^0.0.7",
+    "@skip-router/core": "^0.1.0-rc6",
     "@tanstack/react-query": "^4.29.5",
     "@types/node": "20.1.2",
     "@types/react": "18.2.6",
@@ -63,7 +63,9 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tailwindcss": "3.3.2",
-    "usehooks-ts": "^2.9.1"
+    "usehooks-ts": "^2.9.1",
+    "viem": "^1.12.2",
+    "wagmi": "^1.4.2"
   },
   "devDependencies": {
     "@playwright/test": "^1.38.0",

src/components/RouteDisplay.tsx

@@ -307,6 +307,11 @@ const RouteDisplay: FC<Props> = ({ route }) => {
         return;
       }
 
+      if ("axelarTransfer" in operation) {
+        // TODO: Implement
+        return;
+      }
+
       const sourceChain = operation.transfer.chainID;
 
       let destinationChain = "";
@@ -322,6 +327,8 @@ const RouteDisplay: FC<Props> = ({ route }) => {
           if ("swapOut" in nextOperation.swap) {
             destinationChain = nextOperation.swap.swapOut.swapVenue.chainID;
           }
+        } else if ("axelarTransfer" in nextOperation) {
+          destinationChain = nextOperation.axelarTransfer.toChain;
         } else {
           destinationChain = nextOperation.transfer.chainID;
         }

src/components/RouteLoadingBanner.tsx

@@ -0,0 +1,27 @@
+const RouteLoadingBanner = () => (
+  <div className="bg-black text-white/50 font-medium uppercase text-xs p-3 rounded-md flex items-center w-full text-left">
+    <p className="flex-1">Finding best route...</p>
+    <svg
+      className="animate-spin h-4 w-4 inline-block text-white"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      ></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  </div>
+);
+
+export default RouteLoadingBanner;

src/components/RouteTransactionCountBanner.tsx

@@ -0,0 +1,20 @@
+import { FC } from "react";
+
+const RouteTransactionCountBanner: FC<{
+  numberOfTransactions: number;
+}> = ({ numberOfTransactions }) => (
+  <div className="bg-black text-white/50 font-medium uppercase text-xs p-3 rounded-md flex items-center w-full text-left">
+    <p className="flex-1">
+      This route requires{" "}
+      {numberOfTransactions === 1 && (
+        <span className="text-white">1 Transaction</span>
+      )}
+      {numberOfTransactions > 1 && (
+        <span className="text-white">{numberOfTransactions} Transactions</span>
+      )}{" "}
+      to complete
+    </p>
+  </div>
+);
+
+export default RouteTransactionCountBanner;

src/components/SwapWidget/SwapWidget.tsx

@@ -1,60 +1,18 @@
-import { WalletStatus } from "@cosmos-kit/core";
-import { useChain } from "@cosmos-kit/react";
 import { ArrowsUpDownIcon } from "@heroicons/react/20/solid";
 import { FC, Fragment } from "react";
 
 import { useChains } from "@/context/chains";
+import { useAccount } from "@/hooks/useAccount";
 
 import AssetInput from "../AssetInput";
 import { ConnectedWalletButton } from "../ConnectedWalletButton";
 import { ConnectWalletButtonSmall } from "../ConnectWalletButtonSmall";
+import RouteLoadingBanner from "../RouteLoadingBanner";
+import RouteTransactionCountBanner from "../RouteTransactionCountBanner";
 import TransactionDialog from "../TransactionDialog";
 import { useWalletModal, WalletModal } from "../WalletModal";
 import { useSwapWidget } from "./useSwapWidget";
 
-const RouteLoading = () => (
-  <div className="bg-black text-white/50 font-medium uppercase text-xs p-3 rounded-md flex items-center w-full text-left">
-    <p className="flex-1">Finding best route...</p>
-    <svg
-      className="animate-spin h-4 w-4 inline-block text-white"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-    >
-      <circle
-        className="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        strokeWidth="4"
-      ></circle>
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      ></path>
-    </svg>
-  </div>
-);
-
-const RouteTransactionCountBanner: FC<{
-  numberOfTransactions: number;
-}> = ({ numberOfTransactions }) => (
-  <div className="bg-black text-white/50 font-medium uppercase text-xs p-3 rounded-md flex items-center w-full text-left">
-    <p className="flex-1">
-      This route requires{" "}
-      {numberOfTransactions === 1 && (
-        <span className="text-white">1 Transaction</span>
-      )}
-      {numberOfTransactions > 1 && (
-        <span className="text-white">{numberOfTransactions} Transactions</span>
-      )}{" "}
-      to complete
-    </p>
-  </div>
-);
-
 export const SwapWidget: FC = () => {
   const { openWalletModal } = useWalletModal();
   const { chains } = useChains();
@@ -78,35 +36,42 @@ export const SwapWidget: FC = () => {
     onDestinationAssetChange,
   } = useSwapWidget();
 
-  const {
-    status: walletConnectStatus,
-    address,
-    wallet,
-  } = useChain(sourceChain?.record?.chain.chain_name ?? "cosmoshub");
+  const { address, isWalletConnected, wallet } = useAccount(
+    sourceChain?.chainID ?? "cosmoshub-4",
+  );
+
+  const { address: destinationChainAddress } = useAccount(
+    destinationChain?.chainID ?? "cosmoshub-4",
+  );
+
+  const shouldShowDestinationWalletButton =
+    !!sourceChain &&
+    !!destinationChain &&
+    sourceChain.chainType !== destinationChain.chainType;
 
   return (
     <Fragment>
       <div>
         <div className="space-y-6">
           <div className="flex items-center justify-between">
             <p className="font-semibold text-2xl">From</p>
-            {address &&
-            wallet &&
-            walletConnectStatus === WalletStatus.Connected ? (
+            {address && wallet && isWalletConnected ? (
               <ConnectedWalletButton
                 address={address}
-                onClick={openWalletModal}
-                walletName={wallet.prettyName}
+                onClick={() => openWalletModal(sourceChain?.chainID ?? "")}
+                walletName={wallet.walletPrettyName}
                 walletLogo={
-                  wallet.logo
-                    ? typeof wallet.logo === "string"
-                      ? wallet.logo
-                      : wallet.logo.major
+                  wallet.walletInfo.logo
+                    ? typeof wallet.walletInfo.logo === "string"
+                      ? wallet.walletInfo.logo
+                      : wallet.walletInfo.logo.major
                     : ""
                 }
               />
             ) : (
-              <ConnectWalletButtonSmall onClick={openWalletModal} />
+              <ConnectWalletButtonSmall
+                onClick={() => openWalletModal(sourceChain?.chainID ?? "")}
+              />
             )}
           </div>
           <div data-testid="source">
@@ -146,6 +111,24 @@ export const SwapWidget: FC = () => {
               </button>
             </div>
             <p className="font-semibold text-2xl">To</p>
+            {shouldShowDestinationWalletButton ? (
+              <div className="absolute inset-y-0 right-0 flex items-center">
+                <button
+                  className="bg-[#FF486E]/20 hover:bg-[#FF486E]/30 text-[#FF486E] text-xs font-semibold rounded-lg py-1 px-2.5 flex items-center gap-1 transition-colors focus:outline-none"
+                  onClick={() =>
+                    openWalletModal(destinationChain?.chainID ?? "cosmoshub-4")
+                  }
+                  data-testid="destination-wallet-btn"
+                >
+                  {destinationChainAddress
+                    ? `${destinationChainAddress.slice(
+                        0,
+                        8,
+                      )}...${destinationChainAddress.slice(-5)}`
+                    : "Connect Wallet"}
+                </button>
+              </div>
+            ) : null}
           </div>
           <div data-testid="destination">
             <AssetInput
@@ -157,23 +140,23 @@ export const SwapWidget: FC = () => {
               chains={chains}
             />
           </div>
-          {routeLoading && <RouteLoading />}
+          {routeLoading && <RouteLoadingBanner />}
           {route && !routeLoading && (
             <RouteTransactionCountBanner
               numberOfTransactions={numberOfTransactions}
             />
           )}
-          {sourceChain && walletConnectStatus !== WalletStatus.Connected && (
+          {sourceChain && !isWalletConnected && (
             <button
               className="bg-[#FF486E] text-white font-semibold py-4 rounded-md w-full transition-transform hover:scale-105 hover:rotate-1"
-              onClick={async () => {
-                openWalletModal();
+              onClick={() => {
+                openWalletModal(sourceChain.chainID);
               }}
             >
               Connect Wallet
             </button>
           )}
-          {sourceChain && walletConnectStatus === WalletStatus.Connected && (
+          {sourceChain && isWalletConnected && (
             <div className="space-y-4">
               <TransactionDialog
                 route={route}
@@ -189,7 +172,7 @@ export const SwapWidget: FC = () => {
           )}
         </div>
       </div>
-      <WalletModal chainID={sourceChain?.chainID ?? "cosmoshub-4"} />
+      <WalletModal />
     </Fragment>
   );
 };

src/components/SwapWidget/useSwapWidget.ts

@@ -1,6 +1,7 @@
 import { useChain } from "@cosmos-kit/react";
 import { ethers } from "ethers";
 import { useEffect, useMemo, useState } from "react";
+import { useNetwork, useSwitchNetwork } from "wagmi";
 
 import { AssetWithMetadata, useAssets } from "@/context/assets";
 import { Chain, useChains } from "@/context/chains";
@@ -102,6 +103,29 @@ export function useSwapWidget() {
     return amountIn > balance;
   }, [balances, formValues.amountIn, formValues.sourceAsset]);
 
+  const { chain: currentEvmChain } = useNetwork();
+
+  const { switchNetwork } = useSwitchNetwork();
+
+  useEffect(() => {
+    if (
+      !formValues.sourceChain ||
+      formValues.sourceChain.chainType === "cosmos"
+    ) {
+      return;
+    }
+
+    if (!currentEvmChain || !switchNetwork) {
+      return;
+    }
+
+    const chainID = parseInt(formValues.sourceChain.chainID);
+
+    if (currentEvmChain.id !== chainID) {
+      switchNetwork(chainID);
+    }
+  }, [currentEvmChain, formValues.sourceChain, switchNetwork]);
+
   return {
     amountIn: formValues.amountIn,
     amountOut,