diff --git a/src/app/(index)/ConnectWalletButton.tsx b/src/app/(index)/ConnectWalletButton.tsx index c2d8eb8..a46b0d3 100644 --- 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 index 8202379..83b7acd 100644 --- 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([]); 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 index ca7c2ed..5a1d92b 100644 --- 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 ? ( addTokenToWallet(contract, symbol, decimals)} /> - ); + ) : null; } diff --git a/src/contexts/WalletSelectorContext.tsx b/src/contexts/WalletSelectorContext.tsx index f2af9a1..994e7dc 100644 --- a/src/contexts/WalletSelectorContext.tsx +++ b/src/contexts/WalletSelectorContext.tsx @@ -41,8 +41,10 @@ interface WalletSelectorContextValue { accounts: Array; accountId: string | null; loading: boolean; + isEthereumWallet: boolean; } +export const ETHEREUM_WALLETS_CONNECTOR = "ethereum-wallets"; const WalletSelectorContext = React.createContext(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 index e403a1e..7e77396 100644 --- 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, {