feedback and add switchnetwork

skip-mev · Sep 13, 2024 · a532cf8 · a532cf8
1 parent 9a249cb
commit a532cf8
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 50 deletions.
diff --git a/packages/widget-v2/src/components/RenderWalletList.tsx b/packages/widget-v2/src/components/RenderWalletList.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import styled, { useTheme } from "styled-components";
 import { LeftArrowIcon } from "@/icons/ArrowIcon";
 import { Button } from "@/components/Button";
@@ -67,7 +67,7 @@ export const RenderWalletList = ({
     }
   });
 
-  const renderItem = (wallet: Wallet) => {
+  const renderItem = useCallback((wallet: Wallet) => {
     const {
       walletName,
       walletPrettyName,
@@ -99,57 +99,37 @@ export const RenderWalletList = ({
         rightContent={rightContent?.()}
       />
     );
-  };
+  }, [connectMutation]);
 
   const height = useMemo(() => {
     return Math.min(530, walletList.length * (ITEM_HEIGHT + ITEM_GAP));
   }, [walletList]);
 
   const container = useMemo(() => {
-    if (connectMutation.isError) {
+    if (connectMutation.isError || connectMutation.isPending) {
+      const titleText = connectMutation.isError ? "Failed to connect" : "Connecting to";
       return (
         <StyledInnerContainer height={height} >
           <StyledLoadingContainer>
             <StyledAnimatedBorder
               width={80}
               height={80}
               backgroundColor={theme.primary.text.normal}
-              txState="failed"
+              txState={connectMutation.isError ? "failed" : "broadcasted"}
               borderSize={8}
             >
               <img
                 style={{ objectFit: "cover" }}
                 src={connectMutation.variables?.walletInfo.logo}
                 alt={`${connectMutation.variables?.walletPrettyName} logo`} />
             </StyledAnimatedBorder>
-            <Text color={theme.primary.text.lowContrast}>Failed to connect to {connectMutation.variables?.walletPrettyName}</Text>
+            <Text color={theme.primary.text.lowContrast}>{titleText} {connectMutation.variables?.walletPrettyName}</Text>
+            {connectMutation.error && <Text textAlign="center" fontSize={14} color={theme.primary.text.lowContrast}>{connectMutation.error.message}</Text>}
           </StyledLoadingContainer>
         </StyledInnerContainer >
       );
     }
 
-    if (connectMutation.isPending) {
-      return (
-        <StyledInnerContainer height={height}>
-          <StyledLoadingContainer>
-            <StyledAnimatedBorder
-              width={80}
-              height={80}
-              backgroundColor={theme.primary.text.normal}
-              txState="broadcasted"
-              borderSize={8}
-            >
-              <img
-                style={{ objectFit: "cover" }}
-                src={connectMutation.variables?.walletInfo.logo}
-                alt={`${connectMutation.variables?.walletPrettyName} logo`} />
-            </StyledAnimatedBorder>
-            <Text color={theme.primary.text.lowContrast}>Connecting to {connectMutation.variables?.walletPrettyName}</Text>
-          </StyledLoadingContainer>
-        </StyledInnerContainer>
-      );
-    }
-
     return <VirtualList
       listItems={walletList}
       height={height}
@@ -158,8 +138,7 @@ export const RenderWalletList = ({
       itemKey={(item) => item.walletName}
     />;
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [connectMutation, height, walletList]);
+  }, [connectMutation.error, connectMutation.isError, connectMutation.isPending, connectMutation.variables?.walletInfo.logo, connectMutation.variables?.walletPrettyName, height, renderItem, theme.primary.text.lowContrast, theme.primary.text.normal, walletList]);
 
   return (
     <StyledContainer gap={15}>

diff --git a/packages/widget-v2/src/constants/wagmi.ts b/packages/widget-v2/src/constants/wagmi.ts
@@ -78,8 +78,6 @@ const formaTestnet = defineChain({
   testnet: true,
 });
 
-
-// Update EVM_CHAINS in src/constants/wagmi.ts as well
 export const config: Config = createConfig({
   chains: [
     arbitrum,

diff --git a/packages/widget-v2/src/hooks/useAccount.ts b/packages/widget-v2/src/hooks/useAccount.ts
@@ -23,7 +23,6 @@ export const useAccount = (chainID?: string) => {
 
   const evmAccount = useEvmAccount();
   const { wallets: solanaWallets } = useSolanaWallet();
-
   const account = useMemo(() => {
     switch (chainType) {
       case "cosmos":
@@ -44,6 +43,7 @@ export const useAccount = (chainID?: string) => {
           };
         }
       case "evm":
+        if (evmAccount.chainId !== Number(chainID)) return;
         if (!evmAccount.address) return;
         if (!evmAccount.connector) return;
         return {
@@ -74,7 +74,7 @@ export const useAccount = (chainID?: string) => {
       default:
         return undefined;
     }
-  }, [chainType, cosmosAccount, evmAccount.address, evmAccount.connector, solanaWallets, wallet.cosmos, wallet.svm?.walletName]);
+  }, [chainType, evmAccount.chainId, evmAccount.address, evmAccount.connector, chainID, cosmosAccount, wallet.cosmos, wallet.svm?.walletName, solanaWallets]);
 
   return account;
 };
diff --git a/packages/widget-v2/src/hooks/useCreateEvmWallets.tsx b/packages/widget-v2/src/hooks/useCreateEvmWallets.tsx
@@ -1,25 +1,31 @@
 import { seiPrecompileAddrABI } from "@/constants/abis";
 import { evmWalletAtom, MinimalWallet } from "@/state/wallets";
 import { useSetAtom } from "jotai";
-import { useCallback } from "react";
+import { useCallback, } from "react";
 import { createPublicClient, http } from "viem";
 import { sei } from "viem/chains";
-import { useAccount as useEvmAccount, useDisconnect as useEvmDisconnect, useConnect as useEvmConnect } from "wagmi";
+import { useAccount, useDisconnect, useConnect, } from "wagmi";
 
 
 export const useCreateEvmWallets = () => {
   const setEvmWallet = useSetAtom(evmWalletAtom);
   const {
-    connector: currentEvmConnector, address: evmAddress, isConnected: isEvmConnected,
-  } = useEvmAccount();
-  const { disconnectAsync } = useEvmDisconnect();
-  const { connectors, connectAsync } = useEvmConnect();
+    connector: currentEvmConnector, address: evmAddress, isConnected: isEvmConnected, chainId
+  } = useAccount();
+  const { disconnectAsync } = useDisconnect();
+  const { connectors, connectAsync } = useConnect();
 
   const createEvmWallets = useCallback((chainID: string) => {
     const isSei = chainID === "pacific-1";
-
     const wallets: MinimalWallet[] = [];
     for (const connector of connectors) {
+      if (
+        wallets.findIndex((wallet) => wallet.walletName === connector.id) !==
+        -1
+      ) {
+        continue;
+      }
+
       const evmGetAddress: MinimalWallet["getAddress"] = async ({
         signRequired,
       }) => {
@@ -40,7 +46,12 @@ export const useCreateEvmWallets = () => {
           logo: connector.icon,
         },
         connect: async () => {
-          if (connector.id === currentEvmConnector?.id) return;
+          if (isEvmConnected && (chainId !== Number(chainID)) && connector.id === currentEvmConnector?.id) {
+            await connector?.switchChain?.({
+              chainId: Number(chainID),
+            });
+            return;
+          }
           try {
             await connectAsync({ connector, chainId: Number(chainID) });
             setEvmWallet({ walletName: connector.id, chainType: "evm" });
@@ -89,7 +100,7 @@ export const useCreateEvmWallets = () => {
       wallets.push(minimalWallet);
     }
     return wallets;
-  }, [connectAsync, connectors, currentEvmConnector, disconnectAsync, evmAddress, isEvmConnected, setEvmWallet]);
+  }, [chainId, connectAsync, connectors, currentEvmConnector?.id, disconnectAsync, evmAddress, isEvmConnected, setEvmWallet]);
 
   return { createEvmWallets };
 };
diff --git a/packages/widget-v2/src/hooks/useWalletList.tsx b/packages/widget-v2/src/hooks/useWalletList.tsx
@@ -26,7 +26,6 @@ export const useWalletList = (chainID?: string) => {
         return [];
     }
   }, [chainID, chainType, createCosmosWallets, createEvmWallets, createSolanaWallets]);
-
   return walletList;
 };
 
@@ -39,27 +38,34 @@ export const useDestinationWalletList = (chainID?: string) => {
 
   const { data: chains } = useAtomValue(skipChainsAtom);
   const chainType = chains?.find(c => c.chainID === chainID)?.chainType;
+
+
+  let walletType = chainType;
   const isSei = chainID === "pacific-1";
+  if (isSei) {
+    walletType = "sei";
+  }
+
 
   const walletList = useMemo(() => {
     if (!chainID) return [];
-    switch (true) {
-      case isSei:
+    switch (walletType) {
+      case "sei":
         {
           const cosmos = createCosmosWallets(chainID);
           const evm = createEvmWallets(chainID);
           return [...cosmos, ...evm];
         }
-      case chainType === "cosmos":
+      case "cosmos":
         return createCosmosWallets(chainID);
-      case chainType === "evm":
+      case "evm":
         return createEvmWallets(chainID);
-      case chainType === "svm":
+      case "svm":
         return createSolanaWallets();
       default:
         return [];
     }
-  }, [chainID, chainType, createCosmosWallets, createEvmWallets, createSolanaWallets, isSei]);
+  }, [chainID, createCosmosWallets, createEvmWallets, createSolanaWallets, walletType]);
 
   return walletList;
 };