Merge pull request #4 from aurora-is-near/ycg/switch-chain-before-add…

…ing-token-hide feat: switch chain before changing token
aurora-is-near · Oct 4, 2024 · cc6f6a1 · cc6f6a1
2 parents 54bd48f + 919725b
commit cc6f6a1
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 12 deletions.
diff --git a/src/app/(index)/ConnectWalletButton.tsx b/src/app/(index)/ConnectWalletButton.tsx
@@ -4,7 +4,10 @@ import { useCallback } from "react";
 import Link from "next/link";
 import Avatar, { ethWalletAvatarInputFormatter } from "@/components/Avatar";
 import Button from "@/components/Button";
-import { useWalletSelector } from "@/contexts/WalletSelectorContext";
+import {
+  ETHEREUM_WALLETS_CONNECTOR,
+  useWalletSelector,
+} from "@/contexts/WalletSelectorContext";
 import midTruncate from "@/utils/midTruncate";
 import { InjectedWalletBehaviour } from "@near-wallet-selector/core";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
@@ -33,7 +36,7 @@ const ConnectWalletButton = () => {
 
   const connectWithEth = useCallback(async () => {
     try {
-      const wallet = await selector.wallet("ethereum-wallets");
+      const wallet = await selector.wallet(ETHEREUM_WALLETS_CONNECTOR);
       (wallet as InjectedWalletBehaviour).signIn({ contractId: "" });
     } catch (e) {
       console.error(e);

diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import {
   AccessKeyInfoView,
   FunctionCallPermissionView,
@@ -13,7 +13,7 @@ import { Card, CardPadding } from "@/components/Card";
 import { InformationCircleIcon } from "@heroicons/react/20/solid";
 
 const AccountPage = () => {
-  const { accountId, selector } = useWalletSelector();
+  const { accountId, selector, isEthereumWallet } = useWalletSelector();
   const [dappAccessKeys, setDappAccessKeys] = useState<AccessKeyInfoView[]>([]);
   const [onboardingAccessKeys, setOnboardingAccessKeys] = useState<
     AccessKeyInfoView[]
@@ -41,11 +41,6 @@ const AccountPage = () => {
     updateAccessKeys();
   }, [updateAccessKeys]);
 
-  const isEthereumWallet = useMemo(
-    () => selector.store.getState().selectedWalletId === "ethereum-wallets",
-    [selector, accountId]
-  );
-
   const onDeauthorize = useCallback(
     async (publicKey: string) => {
       if (!accountId) {

diff --git a/src/components/AddTokenIcon.tsx b/src/components/AddTokenIcon.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import Tooltip from "./Tooltip";
 import { PlusCircleIcon } from "@heroicons/react/24/outline";
 import { addTokenToWallet } from "@/utils/addTokenToWallet";
+import { useWalletSelector } from "@/contexts/WalletSelectorContext";
 
 export default function AddTokenIcon({
   contract,
@@ -12,12 +13,13 @@ export default function AddTokenIcon({
   symbol: string;
   decimals: number;
 }) {
-  return (
+  const { isEthereumWallet } = useWalletSelector();
+  return isEthereumWallet ? (
     <Tooltip content="Add token to wallet" tooltipClassname="w-fit text-nowrap">
       <PlusCircleIcon
         className="h-5 w-5 text-sand-8 group-hover:text-sand-11"
         onClick={() => addTokenToWallet(contract, symbol, decimals)}
       />
     </Tooltip>
-  );
+  ) : null;
 }
diff --git a/src/contexts/WalletSelectorContext.tsx b/src/contexts/WalletSelectorContext.tsx
@@ -41,8 +41,10 @@ interface WalletSelectorContextValue {
   accounts: Array<AccountState>;
   accountId: string | null;
   loading: boolean;
+  isEthereumWallet: boolean;
 }
 
+export const ETHEREUM_WALLETS_CONNECTOR = "ethereum-wallets";
 const WalletSelectorContext =
   React.createContext<WalletSelectorContextValue | null>(null);
 
@@ -207,6 +209,10 @@ export const WalletSelectorContextProvider: React.FC<{
       account,
       accountId,
       loading,
+      isEthereumWallet: selector
+        ? selector.store.getState().selectedWalletId ===
+          ETHEREUM_WALLETS_CONNECTOR
+        : false,
     };
   }, [selector, modal, accounts, loading]);
 

diff --git a/src/utils/addTokenToWallet.ts b/src/utils/addTokenToWallet.ts
@@ -1,5 +1,5 @@
 import { keccak256, toHex } from "viem";
-import { watchAsset } from "viem/actions";
+import { watchAsset, switchChain } from "viem/actions";
 import { getConnectorClient } from "@wagmi/core";
 import { wagmiConfig } from "@/contexts/WalletSelectorContext";
 import { getTokenMetaData } from "@/utils/near";
@@ -17,6 +17,7 @@ export async function addTokenToWallet(
     }
 
     const walletClient = await getConnectorClient(wagmiConfig);
+    await switchChain(walletClient, { id: Number(process.env.chainId) });
     const address = playgroundComputeAddress(contractId);
 
     watchAsset(walletClient, {