diff --git a/src/content/ccip/llms-full.txt b/src/content/ccip/llms-full.txt index f98fa0c6d6c..f325b70999e 100644 --- a/src/content/ccip/llms-full.txt +++ b/src/content/ccip/llms-full.txt @@ -7314,6 +7314,11 @@ CCIP provides test tokens that you can mint on testnets for development and test Call the `drip` function directly on token contracts using the interface below or through block explorers: + + ### Solana Devnet Use the dedicated faucet interface for CCIP-BnM tokens: diff --git a/src/content/ccip/test-tokens.mdx b/src/content/ccip/test-tokens.mdx index f026f33dd3d..173a8435ae7 100644 --- a/src/content/ccip/test-tokens.mdx +++ b/src/content/ccip/test-tokens.mdx @@ -24,6 +24,11 @@ CCIP provides test tokens that you can mint on testnets for development and test Call the `drip` function directly on token contracts using the interface below or through block explorers: + + ### Solana Devnet diff --git a/src/features/ccip/components/MintTokenButton.tsx b/src/features/ccip/components/MintTokenButton.tsx index c997b0049e6..19adc4b9232 100644 --- a/src/features/ccip/components/MintTokenButton.tsx +++ b/src/features/ccip/components/MintTokenButton.tsx @@ -2,9 +2,9 @@ import button from "@chainlink/design-system/button.module.css" import walletStyles from "./WalletConnection.module.css" -import { useEffect, useState } from "react" +import { useEffect, useMemo, useRef, useState } from "react" import { NetworkDropdown } from "./NetworkDropdown.tsx" -import { useMetaMaskProvider } from "@hooks/useEIP6963Providers.tsx" +import { useWalletSelector } from "@hooks/useEIP6963Providers.tsx" import { useWalletConnectionStorage } from "@hooks/useLocalStorage.ts" import { EIP1193Provider } from "../../utils/EIP1193Interface.ts" import { Toast } from "./Toast.tsx" @@ -12,19 +12,6 @@ import { WalletErrorBoundary } from "../../../components/ErrorBoundary.tsx" import { WalletSetupGate } from "./WalletSetupGate.tsx" import "./container.css" -interface Caveat { - type: string - value: string[] -} - -interface RequestPermissions { - caveats: Caveat[] - date: number - id: string - invoker: string - parentCapability: string -} - interface ConnectInfo { chainId: string } @@ -34,6 +21,19 @@ interface DisconnectError { message?: string } +function getProviderErrorMessage(error: unknown): string { + if (error instanceof Error && error.message) return error.message + if (error && typeof error === "object" && "message" in error) + return String((error as { message?: unknown }).message ?? "") + return "Unknown error" +} + +function getProviderErrorCode(error: unknown): number | string | undefined { + if (error && typeof error === "object" && "code" in error) + return (error as { code?: unknown }).code as number | string + return undefined +} + export const MintTokenButton = () => { // ✅ SSR Guard: Return loading state during server-side rendering if (typeof window === "undefined") { @@ -50,69 +50,81 @@ export const MintTokenButton = () => { const [showToast, setShowToast] = useState(false) const [walletCheckCount, setWalletCheckCount] = useState(0) - // ✅ Use EIP-6963 to get MetaMask specifically - const metaMaskProvider = useMetaMaskProvider() + const { walletOptions } = useWalletSelector() + const [selectedWalletUuid, setSelectedWalletUuid] = useState(null) const { saveConnectionState } = useWalletConnectionStorage() + const providerSessionIdRef = useRef(0) + + const evmWalletOptions = useMemo(() => { + // Temporarily exclude Phantom from the EVM faucet wallet picker. + return walletOptions.filter((w) => !w.isPhantom) + }, [walletOptions]) useEffect(() => { - if (!metaMaskProvider) return + if (!selectedWalletUuid) return + if (evmWalletOptions.some((w) => w.uuid === selectedWalletUuid)) return + setSelectedWalletUuid(null) + }, [evmWalletOptions, selectedWalletUuid]) - // ✅ Listen to events on the selected MetaMask provider - const handleAccountsChanged = (accounts: string[]) => { - console.log("🔄 MetaMask account changed:", { - previousAddress: userAddress, - newAccounts: accounts, - connected: accounts.length > 0, - newAddress: accounts.length > 0 ? accounts[0] : "disconnected", - }) + const selectedWallet = useMemo(() => { + if (evmWalletOptions.length === 0) return null + return selectedWalletUuid ? (evmWalletOptions.find((w) => w.uuid === selectedWalletUuid) ?? null) : null + }, [evmWalletOptions, selectedWalletUuid]) - setIsWalletConnected(accounts.length > 0) - setUserAddress(accounts.length > 0 ? accounts[0] : "") + const selectedProvider = selectedWallet?.provider ?? null - if (accounts.length === 0) { - console.log("🔌 MetaMask disconnected") - } else if (accounts[0] !== userAddress) { - console.log("👤 MetaMask account switched:", accounts[0]) - } + useEffect(() => { + // Any time the selected provider changes (or is cleared), invalidate in-flight async work. + providerSessionIdRef.current += 1 + const sessionId = providerSessionIdRef.current + + if (!selectedProvider) { + setIsWalletConnected(false) + setUserAddress("") + return + } + + // Listen to events on the selected EIP-1193 provider + const handleAccountsChanged = (accounts: string[]) => { + const nextAddress = accounts && accounts.length > 0 ? accounts[0] : "" + setIsWalletConnected(nextAddress !== "") + setUserAddress(nextAddress) } - // ✅ Also listen for connection/disconnection events const handleConnect = (connectInfo: ConnectInfo) => { - console.log("🔗 MetaMask connected:", connectInfo) + console.log("🔗 Wallet connected:", connectInfo) } const handleDisconnect = (error: DisconnectError) => { - console.log("🔌 MetaMask disconnected:", error) + console.log("🔌 Wallet disconnected:", error) setIsWalletConnected(false) setUserAddress("") } - metaMaskProvider.on("accountsChanged", handleAccountsChanged) - metaMaskProvider.on("connect", handleConnect) - metaMaskProvider.on("disconnect", handleDisconnect) + selectedProvider.on("accountsChanged", handleAccountsChanged) + selectedProvider.on("connect", handleConnect) + selectedProvider.on("disconnect", handleDisconnect) const getAccount = async () => { - if (!metaMaskProvider) { - setIsWalletConnected(false) - setUserAddress("") - return - } - try { - const accounts = await metaMaskProvider.request({ + const accounts = await selectedProvider.request({ method: "eth_accounts", }) + if (providerSessionIdRef.current !== sessionId) return + if (accounts && accounts.length > 0) { setUserAddress(accounts[0]) setIsWalletConnected(true) - console.log("MetaMask account connected:", accounts[0]) + const chainHexId = await selectedProvider.request({ method: "eth_chainId" }) + if (providerSessionIdRef.current !== sessionId) return + saveConnectionState(accounts[0], chainHexId) } else { setIsWalletConnected(false) setUserAddress("") } } catch (error) { - console.log("Failed to get MetaMask accounts:", error) + if (providerSessionIdRef.current !== sessionId) return setIsWalletConnected(false) setUserAddress("") } @@ -121,11 +133,11 @@ export const MintTokenButton = () => { // ✅ Cleanup all event listeners return () => { - metaMaskProvider.removeListener?.("accountsChanged", handleAccountsChanged) - metaMaskProvider.removeListener?.("connect", handleConnect) - metaMaskProvider.removeListener?.("disconnect", handleDisconnect) + selectedProvider.removeListener?.("accountsChanged", handleAccountsChanged) + selectedProvider.removeListener?.("connect", handleConnect) + selectedProvider.removeListener?.("disconnect", handleDisconnect) } - }, [metaMaskProvider, userAddress]) + }, [saveConnectionState, selectedProvider]) // Add wallet detection refresh effect useEffect(() => { @@ -151,63 +163,56 @@ export const MintTokenButton = () => { } const connectToWallet = async () => { - // ✅ Use EIP-6963 discovered MetaMask provider - if (!metaMaskProvider) { - showToastMessage("MetaMask not found. Please install MetaMask extension for EVM token minting.") + if (!selectedProvider) { + showToastMessage("No injected EVM wallet found. Please install a browser wallet extension to continue.") return } - validateEthApi(metaMaskProvider) - const accountPermissions = await requestPermissions(metaMaskProvider) - if (!accountPermissions) { - throw Error("Something went wrong when connecting MetaMask wallet. Please follow the steps in the popup page.") - } - const addressList = await metaMaskProvider - .request({ + // Invalidate any in-flight eth_accounts read so it can't overwrite a successful connect. + providerSessionIdRef.current += 1 + const sessionId = providerSessionIdRef.current + + try { + validateEthApi(selectedProvider) + const addressList = await selectedProvider.request({ method: "eth_requestAccounts", }) - .catch((error: Error) => { - showToastMessage(`Something went wrong: ${error.message}`) - }) - const currentChainId = await metaMaskProvider.request({ method: "eth_chainId" }).catch((error: Error) => { - showToastMessage(`Something went wrong: ${error.message}`) - }) - if (addressList) { - setUserAddress(addressList[0]) - saveConnectionState(addressList[0], currentChainId as string) - } - } + const currentChainId = await selectedProvider.request({ method: "eth_chainId" }) - const requestPermissions = async (provider: EIP1193Provider) => { - let accountsPermission: RequestPermissions | undefined - await provider - .request({ - method: "wallet_requestPermissions", - params: [{ eth_accounts: {} }], - }) - .then((permissions) => { - accountsPermission = permissions.find( - (permission: RequestPermissions) => permission.parentCapability === "eth_accounts" - ) - }) - .catch((error) => { - if (error.code === 4001) { - // EIP-1193 userRejectedRequest error - console.log("Permissions needed to continue.") - } else { - console.error(error) - } - }) - return accountsPermission + if (providerSessionIdRef.current !== sessionId) return + + const address = addressList && addressList.length > 0 ? addressList[0] : "" + if (!address) { + showToastMessage("No accounts returned by wallet. Please check your wallet and try again.") + return + } + + setUserAddress(address) + setIsWalletConnected(true) + saveConnectionState(address, currentChainId) + } catch (error) { + if (providerSessionIdRef.current !== sessionId) return + const code = getProviderErrorCode(error) + if (code === 4001 || code === "4001") { + showToastMessage("Connection request rejected in wallet.") + return + } + showToastMessage(`Something went wrong: ${getProviderErrorMessage(error)}`) + } } return ( 0} + walletName="Injected EVM wallet" + suggestedWallets={["Rabby", "MetaMask"]} installLinks={[ + { + name: "Rabby", + url: "https://rabby.io/", + description: "Browser extension", + }, { name: "MetaMask", url: "https://metamask.io/download/", @@ -222,6 +227,34 @@ export const MintTokenButton = () => { }} >
+ {evmWalletOptions.length > 0 && ( +
+

Select a wallet:

+
+ {evmWalletOptions.map((wallet) => { + const isSelected = wallet.uuid === selectedWallet?.uuid + return ( + + ) + })} +
+
+ )} {!isWalletConnected && (

Connect your browser wallet to get started:

@@ -229,23 +262,20 @@ export const MintTokenButton = () => {
)} - {userAddress && ( - <> - - - )} + {userAddress && selectedProvider && } {showToast && } diff --git a/src/features/ccip/components/NetworkDropdown.tsx b/src/features/ccip/components/NetworkDropdown.tsx index 79225d4aee3..d14b6e7b84e 100644 --- a/src/features/ccip/components/NetworkDropdown.tsx +++ b/src/features/ccip/components/NetworkDropdown.tsx @@ -5,9 +5,9 @@ import button from "@chainlink/design-system/button.module.css" import walletStyles from "./WalletConnection.module.css" import { Contract, BrowserProvider, toQuantity } from "ethers" import { burnMintAbi } from "@features/abi/index.ts" -import { useMetaMaskProvider } from "@hooks/useEIP6963Providers.tsx" import { useNetworkChangeStorage } from "@hooks/useLocalStorage.ts" import { SupportedChain } from "@config/index.ts" +import { EIP1193Provider } from "../../utils/EIP1193Interface.ts" import { getAllChains, getBnMParams, @@ -38,10 +38,64 @@ enum LoadingState { interface Props { userAddress: string + provider: EIP1193Provider } -export const NetworkDropdown = ({ userAddress }: Props) => { - const [activeChain, setActiveChain] = useState(undefined) +function getProviderErrorMessage(error: unknown): string { + if (error instanceof Error && error.message) return error.message + if (error && typeof error === "object" && "message" in error) + return String((error as { message?: unknown }).message ?? "") + return "Unknown error" +} + +function getProviderErrorCode(error: unknown): number | string | undefined { + if (error && typeof error === "object" && "code" in error) + return (error as { code?: unknown }).code as number | string + return undefined +} + +function isUserRejectedRequest(error: unknown): boolean { + const code = getProviderErrorCode(error) + if (code === 4001 || code === "4001") return true + const message = getProviderErrorMessage(error).toLowerCase() + return message.includes("user rejected") || message.includes("rejected the request") +} + +function isUnknownChainError(error: unknown): boolean { + const code = getProviderErrorCode(error) + if (code === 4902 || code === "4902") return true + const message = getProviderErrorMessage(error).toLowerCase() + return ( + message.includes("unrecognized chain") || + message.includes("unknown chain") || + message.includes("chain is not added") || + message.includes("not been added") || + message.includes("does not exist") || + message.includes("unknown network") + ) +} + +function isAlreadyAddedNetworkError(error: unknown): boolean { + const message = getProviderErrorMessage(error).toLowerCase() + return ( + (message.includes("already") && message.includes("added")) || + (message.includes("already") && message.includes("exists")) || + message.includes("already exists") + ) +} + +const EXCLUDED_CHAIN_RDDS = new Set([ + "dogeos-testnet-chikyu", + "doge-os-chikyu-testnet", + "ethereum-testnet-hoodi-morph", + "adi-testnet", + "ronin-testnet-saigon", +]) + +export const NetworkDropdown = ({ userAddress, provider }: Props) => { + const [walletChain, setWalletChain] = useState(undefined) + const [selectedChain, setSelectedChain] = useState("ETHEREUM_SEPOLIA") + const [walletNetworkStatus, setWalletNetworkStatus] = useState<"unknown" | "missing" | "present">("unknown") const [isNetworkChangePending, setIsNetworkChangePending] = useState(false) const [isLoading, setIsLoading] = useState(LoadingState.START) const [toastMessage, setToastMessage] = useState("") @@ -50,8 +104,6 @@ export const NetworkDropdown = ({ userAddress }: Props) => { const [mintLnMTokenButtonDisabled, setMintLnMTokenButtonDisabled] = useState(false) const detailsElementRef = useRef(null) - // ✅ Use EIP-6963 to get MetaMask specifically (prevents Phantom conflicts) - const metaMaskProvider = useMetaMaskProvider() const { setNetworkChangePending } = useNetworkChangeStorage() const closeDropdown = useCallback(() => { if (!detailsElementRef.current) return @@ -66,8 +118,9 @@ export const NetworkDropdown = ({ userAddress }: Props) => { chainRdd, supportedChain: directoryToSupportedChain(chainRdd), })) + .filter(({ chainRdd }) => !EXCLUDED_CHAIN_RDDS.has(chainRdd)) .filter(({ supportedChain }) => { - // Only include EVM chains since this is for MetaMask + // Only include EVM chains since this is an EVM wallet flow try { const { chainFamily } = getChainTypeAndFamily(supportedChain) return chainFamily === "evm" @@ -84,7 +137,24 @@ export const NetworkDropdown = ({ userAddress }: Props) => { }) }, []) - const supportedChains = evmChains.map(({ supportedChain }) => supportedChain) + const supportedChains = useMemo(() => evmChains.map(({ supportedChain }) => supportedChain), [evmChains]) + + useEffect(() => { + if (supportedChains.length === 0) return + if (supportedChains.includes(selectedChain)) return + const fallback = supportedChains.includes("ETHEREUM_SEPOLIA") ? "ETHEREUM_SEPOLIA" : supportedChains[0] + setSelectedChain(fallback) + }, [selectedChain, supportedChains]) + + useEffect(() => { + setWalletNetworkStatus("unknown") + }, [selectedChain]) + + useEffect(() => { + if (walletChain === selectedChain) { + setWalletNetworkStatus("present") + } + }, [selectedChain, walletChain]) const supportedChainFromHexChainId = (chainHexId: string) => { const supportedChain = supportedChains.find((supportedChain) => { @@ -98,19 +168,19 @@ export const NetworkDropdown = ({ userAddress }: Props) => { useEffect(() => { const handleChainChanged = (chainHexId: string) => { - setActiveChain(supportedChainFromHexChainId(chainHexId)) + setWalletChain(supportedChainFromHexChainId(chainHexId)) setIsLoading(LoadingState.START) } const refElement = detailsElementRef?.current const getCurrentChain = async () => { - if (!metaMaskProvider) return undefined + if (!provider) return undefined - const chainHexId = await metaMaskProvider.request({ + const chainHexId = await provider.request({ method: "eth_chainId", params: [], }) - metaMaskProvider.on("chainChanged", handleChainChanged) + provider.on("chainChanged", handleChainChanged) const currentChain = supportedChainFromHexChainId(chainHexId) return currentChain } @@ -125,7 +195,7 @@ export const NetworkDropdown = ({ userAddress }: Props) => { } getCurrentChain().then((chain) => { - setActiveChain(chain) + setWalletChain(chain) }) document.body.addEventListener("mouseup", onClick) @@ -133,69 +203,99 @@ export const NetworkDropdown = ({ userAddress }: Props) => { // ✅ Cleanup both click and chain change listeners return () => { document.body.removeEventListener("mouseup", onClick) - metaMaskProvider?.removeListener?.("chainChanged", handleChainChanged) + provider?.removeListener?.("chainChanged", handleChainChanged) } - }, [metaMaskProvider]) + }, [provider]) - // ✅ Call isConnected() as function, not property - const isMMConnected = (() => { + const isProviderConnected = (() => { try { - return metaMaskProvider?.isConnected?.() ?? false + return provider?.isConnected?.() ?? true } catch { - return false + return true } })() - const dropdownDisabled = !isMMConnected || isNetworkChangePending + const dropdownDisabled = !isProviderConnected || isNetworkChangePending // ✅ Simplified error guard - don't require stack property const isSwitchNetworkError = (e: unknown): e is { code: number; message?: string } => { return !!(e && typeof e === "object" && "code" in e) } - const handleNetworkChange = async (chain: SupportedChain) => { - const chainId = getChainId(chain) - if (!chainId) throw Error(`chainId not found for ${chain}`) - const chainHexId = toQuantity(chainId) - - // ✅ MetaMask provider already available from hook + const showToastMessage = (message: string) => { + setToastMessage(message) + setShowToast(true) + } - // ✅ Use isConnected() function - if (!metaMaskProvider || !metaMaskProvider.isConnected?.()) { + const switchToSelectedChain = async () => { + const chainId = getChainId(selectedChain) + if (!chainId) { + showToastMessage("chainId not found for selected network.") return } + const chainHexId = toQuantity(chainId) setIsNetworkChangePending(true) + setNetworkChangePending(true) try { - await metaMaskProvider.request({ + await provider.request({ method: "wallet_switchEthereumChain", - params: [ - { - chainId: chainHexId, - }, - ], + params: [{ chainId: chainHexId }], }) + setWalletNetworkStatus("present") } catch (switchError: unknown) { - if (isSwitchNetworkError(switchError) && switchError.code === 4902) { - // Network not found, add it - const params = getEthereumChainParameter(chainHexId) - await metaMaskProvider.request({ - method: "wallet_addEthereumChain", - params: [params], - }) - } else { - console.error("Network switch failed:", switchError) - throw switchError + if (isUserRejectedRequest(switchError)) { + showToastMessage("Network switch request rejected in wallet.") + return + } + if (isUnknownChainError(switchError) || (isSwitchNetworkError(switchError) && switchError.code === 4902)) { + setWalletNetworkStatus("missing") + showToastMessage("This network isn't added to your wallet yet. Click Add network.") + return } + showToastMessage(`Network switch failed: ${getProviderErrorMessage(switchError)}`) + return } finally { - // ✅ Always clear pending flag setIsNetworkChangePending(false) setNetworkChangePending(false) } + } - setActiveChain(chain) - setIsLoading(LoadingState.START) - closeDropdown() + const addSelectedChain = async () => { + const chainId = getChainId(selectedChain) + if (!chainId) { + showToastMessage("chainId not found for selected network.") + return + } + const chainHexId = toQuantity(chainId) + + setIsNetworkChangePending(true) + setNetworkChangePending(true) + + try { + const params = getEthereumChainParameter(chainHexId) + await provider.request({ + method: "wallet_addEthereumChain", + params: [params], + }) + setWalletNetworkStatus("present") + showToastMessage("Network added. Now click Switch network to continue.") + } catch (addError: unknown) { + if (isUserRejectedRequest(addError)) { + showToastMessage("Add network request rejected in wallet.") + return + } + if (isAlreadyAddedNetworkError(addError)) { + setWalletNetworkStatus("present") + showToastMessage("Network already exists in your wallet. Now click Switch network to continue.") + return + } + showToastMessage(`Failed to add network: ${getProviderErrorMessage(addError)}`) + return + } finally { + setIsNetworkChangePending(false) + setNetworkChangePending(false) + } } // ✅ Wallet-agnostic EIP-1193 provider validation @@ -208,66 +308,61 @@ export const NetworkDropdown = ({ userAddress }: Props) => { } const addBnMAssetToWallet = async () => { - if (!activeChain) return + if (walletChain !== selectedChain) return - const params = getBnMParams({ supportedChain: activeChain, version: Version.V1_2_0 }) + const params = getBnMParams({ supportedChain: selectedChain, version: Version.V1_2_0 }) if (!params) return - if (!metaMaskProvider) { - return - } - - validateEIP1193Provider(metaMaskProvider) - const success = await metaMaskProvider.request({ - method: "wallet_watchAsset", - params, - }) + try { + validateEIP1193Provider(provider) + const success = await provider.request({ + method: "wallet_watchAsset", + params, + }) - if (!success) { - throw new Error( - `Something went wrong. ${params.options.symbol} of address ${params.options.address} not added to the wallet` - ) + if (!success) { + showToastMessage(`Couldn't add ${params.options.symbol} to your wallet.`) + } else { + showToastMessage(`${params.options.symbol} added to wallet.`) + } + } catch (error) { + showToastMessage(`Failed to add token to wallet: ${getProviderErrorMessage(error)}`) } } const addLnMAssetToWallet = async () => { - if (!activeChain) return - const params = getLnMParams({ supportedChain: activeChain, version: Version.V1_2_0 }) + if (walletChain !== selectedChain) return + const params = getLnMParams({ supportedChain: selectedChain, version: Version.V1_2_0 }) if (!params) return - if (!metaMaskProvider) { - return - } - - validateEIP1193Provider(metaMaskProvider) - const success = await metaMaskProvider.request({ - method: "wallet_watchAsset", - params, - }) + try { + validateEIP1193Provider(provider) + const success = await provider.request({ + method: "wallet_watchAsset", + params, + }) - if (!success) { - throw new Error( - `Something went wrong. ${params.options.symbol} of address ${params.options.address} not added to the wallet` - ) + if (!success) { + showToastMessage(`Couldn't add ${params.options.symbol} to your wallet.`) + } else { + showToastMessage(`${params.options.symbol} added to wallet.`) + } + } catch (error) { + showToastMessage(`Failed to add token to wallet: ${getProviderErrorMessage(error)}`) } } const mintBnMTokens = async () => { setIsLoading(LoadingState["LOADING..."]) setMintBnMTokenButtonDisabled(true) - if (!activeChain) return + if (walletChain !== selectedChain) return - const params = getBnMParams({ supportedChain: activeChain, version: Version.V1_2_0 }) + const params = getBnMParams({ supportedChain: selectedChain, version: Version.V1_2_0 }) if (!params) return const { address: ccipBNMContractAddress } = params.options - // ✅ Use MetaMask provider for minting - if (!metaMaskProvider) { - setMintBnMTokenButtonDisabled(false) - return - } - const provider = new BrowserProvider(metaMaskProvider) - const signer = await provider.getSigner() + const ethersProvider = new BrowserProvider(provider) + const signer = await ethersProvider.getSigner() const mintTokensContract = new Contract(ccipBNMContractAddress, burnMintAbi, signer) try { const res = await mintTokensContract.drip(userAddress) @@ -302,26 +397,21 @@ export const NetworkDropdown = ({ userAddress }: Props) => { product: "CCIP", action: "ccip_token_minted", extraInfo1: "BnM", - extraInfo2: activeChain, // chainId + extraInfo2: selectedChain, // chainId }) } const mintLnMTokens = async () => { setIsLoading(LoadingState["LOADING..."]) setMintLnMTokenButtonDisabled(true) - if (!activeChain) return + if (walletChain !== selectedChain) return - const params = getLnMParams({ supportedChain: activeChain, version: Version.V1_2_0 }) + const params = getLnMParams({ supportedChain: selectedChain, version: Version.V1_2_0 }) if (!params) return const { address: ccipLNMContractAddress } = params.options - // ✅ Use MetaMask provider for LnM minting - if (!metaMaskProvider) { - setMintLnMTokenButtonDisabled(false) - return - } - const provider = new BrowserProvider(metaMaskProvider) - const signer = await provider.getSigner() + const ethersProvider = new BrowserProvider(provider) + const signer = await ethersProvider.getSigner() const mintTokensContract = new Contract(ccipLNMContractAddress, burnMintAbi, signer) try { const res = await mintTokensContract.drip(userAddress) @@ -356,7 +446,7 @@ export const NetworkDropdown = ({ userAddress }: Props) => { product: "CCIP", action: "ccip_token_minted", extraInfo1: "LnM", - extraInfo2: activeChain, // chainId + extraInfo2: selectedChain, // chainId }) } @@ -379,9 +469,9 @@ export const NetworkDropdown = ({ userAddress }: Props) => { <> @@ -390,16 +480,16 @@ export const NetworkDropdown = ({ userAddress }: Props) => { color: dropdownDisabled ? "var(--color-text-disabled)" : "initial", }} > - Switching networks... + Confirm in wallet... ) : ( <> @@ -408,7 +498,7 @@ export const NetworkDropdown = ({ userAddress }: Props) => { color: dropdownDisabled ? "var(--color-text-disabled)" : "initial", }} > - {activeChain ? getTitle(activeChain) : "Unknown network"} + {selectedChain ? getTitle(selectedChain) : "Unknown network"} )} @@ -419,18 +509,25 @@ export const NetworkDropdown = ({ userAddress }: Props) => {
    {evmChains.map(({ supportedChain }) => { const supportedChainTitle = getTitle(supportedChain) - const activeChainTitle = activeChain ? getTitle(activeChain) : null + const selectedChainTitle = selectedChain ? getTitle(selectedChain) : null return (
  • - @@ -440,14 +537,14 @@ export const NetworkDropdown = ({ userAddress }: Props) => {
- {activeChain !== undefined ? ( - isBnMOrLnM({ chain: activeChain, version: Version.V1_2_0 }) ? ( + {walletChain === selectedChain ? ( + isBnMOrLnM({ chain: selectedChain, version: Version.V1_2_0 }) ? (
{/* Enhanced Connection Status with Address - All info in one box */}
- Connected to MetaMask on {getTitle(activeChain)} + Connected to wallet on {getTitle(selectedChain)}
{ {/* Action Section */}
{/* Primary Actions - Mint Tokens */} - {activeChain && isBnM({ chain: activeChain, version: Version.V1_2_0 }) && ( + {isBnM({ chain: selectedChain, version: Version.V1_2_0 }) && (
)} - {activeChain && - isLnM({ chain: activeChain, version: Version.V1_2_0 }).supported && - isLnM({ chain: activeChain, version: Version.V1_2_0 }).supportedChainForLock === activeChain && ( + {isLnM({ chain: selectedChain, version: Version.V1_2_0 }).supported && + isLnM({ chain: selectedChain, version: Version.V1_2_0 }).supportedChainForLock === selectedChain && ( <> - {activeChain && isBnM({ chain: activeChain, version: Version.V1_2_0 }) && ( + {isBnM({ chain: selectedChain, version: Version.V1_2_0 }) && (
)}
@@ -507,28 +603,28 @@ export const NetworkDropdown = ({ userAddress }: Props) => { {/* Secondary Actions - Progressive Disclosure */}
- {activeChain && isBnM({ chain: activeChain, version: Version.V1_2_0 }) && ( -
+ {isBnM({ chain: selectedChain, version: Version.V1_2_0 }) && ( +
)} - {activeChain && isLnM({ chain: activeChain, version: Version.V1_2_0 }).supported && ( -
+ {isLnM({ chain: selectedChain, version: Version.V1_2_0 }).supported && ( +
@@ -537,8 +633,7 @@ export const NetworkDropdown = ({ userAddress }: Props) => {
- {isLoading === LoadingState.ERROR && showToast && } - {isLoading === LoadingState.END && showToast && } + {showToast && }
) : (

@@ -547,22 +642,49 @@ export const NetworkDropdown = ({ userAddress }: Props) => {

) ) : ( -
-
- -
-
Please switch to a supported network
-
- Click "Unknown network" above to select a different network. + <> +
+
+ +
+
+ {walletChain ? "Please switch to the correct network" : "Please switch to a supported network"} +
+
+ Click the network dropdown above to select a different network. +
-
+
+ + {walletNetworkStatus !== "present" && ( + + )} +
+ )}
diff --git a/src/features/ccip/components/WalletConnection.module.css b/src/features/ccip/components/WalletConnection.module.css index f6840b08f5e..11b8182ded7 100644 --- a/src/features/ccip/components/WalletConnection.module.css +++ b/src/features/ccip/components/WalletConnection.module.css @@ -170,6 +170,73 @@ flex-shrink: 0; } +/* Wallet picker (injected wallets) */ +.walletPickerContainer { + display: flex; + flex-direction: column; + align-items: center; + gap: var(--space-2x); + padding: var(--space-4x) var(--space-4x) 0; +} + +.walletPickerLabel { + margin: 0; + font-size: var(--text-sm); + color: var(--color-text-secondary); + font-weight: 500; +} + +.walletPickerOptions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: var(--space-2x); + width: 100%; + max-width: 640px; +} + +.walletOptionButton { + display: flex !important; + align-items: center; + gap: var(--space-2x); + min-height: 44px; + padding: var(--space-2x) var(--space-3x); + white-space: nowrap; +} + +.walletOptionButton:focus { + /* Override design-system outer focus ring for wallet picker buttons */ + box-shadow: none !important; +} + +.walletOptionButton:focus-visible { + /* Keep an accessible focus indicator, but avoid an outer boundary */ + box-shadow: inset 0 0 0 2px var(--color-border-interactive-focus) !important; +} + +.walletOptionButtonSelected { + /* Persist the same styling as design-system hover state */ + border-color: var(--blue-800) !important; + background-color: var(--blue-100) !important; + color: var(--blue-800) !important; + font-weight: 600; +} + +.walletOptionButtonSelected:hover, +.walletOptionButtonSelected:focus, +.walletOptionButtonSelected:focus-visible { + border-color: var(--blue-800) !important; + background-color: var(--blue-100) !important; + color: var(--blue-800) !important; +} + +.walletOptionIcon { + width: 18px; + height: 18px; + border-radius: 4px; + flex-shrink: 0; +} + /* Wallet selection area */ .walletSelection { width: 100%; diff --git a/src/features/ccip/components/networkDropdown.module.css b/src/features/ccip/components/networkDropdown.module.css index 931be79f3b9..6e58e87e3a2 100644 --- a/src/features/ccip/components/networkDropdown.module.css +++ b/src/features/ccip/components/networkDropdown.module.css @@ -159,6 +159,7 @@ details { padding: var(--space-4x); border-radius: var(--border-radius-primary); margin-top: var(--space-3x); + margin-bottom: var(--space-3x); border: var(--border-width-primary) solid var(--red-200); } @@ -190,11 +191,20 @@ details { color: var(--color-text-primary); } +.networkCtas { + display: flex; + flex-direction: column; + gap: var(--space-2x); + align-items: center; + padding-bottom: var(--space-4x); +} + /* Responsive adjustments */ @media screen and (max-width: 767px) { .unknownNetworkWarning { padding: var(--space-3x); margin-top: var(--space-2x); + margin-bottom: var(--space-2x); } .warningContent { diff --git a/src/features/utils/index.ts b/src/features/utils/index.ts index a9d35372df4..7b4fe7f1b3f 100644 --- a/src/features/utils/index.ts +++ b/src/features/utils/index.ts @@ -33,6 +33,17 @@ export const getEthereumChainParameter = (chainId: string) => { throw new Error(`Chain with chainId '${chainId}' not found in reference data`) } + const rpcUrls = (Array.isArray(chain.rpc) ? chain.rpc : []) + .filter((url: unknown): url is string => typeof url === "string") + .filter((url) => url.startsWith("https://")) + // Drop placeholder endpoints like https://.../${INFURA_API_KEY} + .filter((url) => !url.includes("$")) + .slice(0, 3) + + if (rpcUrls.length === 0) { + throw new Error(`No valid https rpcUrls found for chainId '${chainId}'`) + } + const params: AddEthereumChainParameter = { chainId, chainName: chain.name, @@ -42,7 +53,7 @@ export const getEthereumChainParameter = (chainId: string) => { ? // eslint-disable-next-line @typescript-eslint/no-explicit-any chain.explorers.map((explorer: any) => explorer.url) : [chain.infoURL], - rpcUrls: chain.rpc, + rpcUrls, } return params } diff --git a/src/hooks/useEIP6963Providers.tsx b/src/hooks/useEIP6963Providers.tsx index 44648160685..07903408a15 100644 --- a/src/hooks/useEIP6963Providers.tsx +++ b/src/hooks/useEIP6963Providers.tsx @@ -123,7 +123,7 @@ export function useWalletSelector() { const providers = useInjectedProviders() const walletOptions = useMemo(() => { - return providers.map((provider) => ({ + const eip6963Options = providers.map((provider) => ({ uuid: provider.info.uuid, name: provider.info.name, icon: provider.info.icon, @@ -132,6 +132,24 @@ export function useWalletSelector() { isMetaMask: provider.info.rdns === "io.metamask", isPhantom: provider.info.rdns === "app.phantom", })) + if (eip6963Options.length > 0) return eip6963Options + + // Legacy fallback for wallets that haven't implemented EIP-6963 announcements. + // This preserves basic injected-wallet support via window.ethereum. + if (typeof window === "undefined") return [] + const ethereum = (window as WindowWithEthereum).ethereum + if (!ethereum) return [] + return [ + { + uuid: "legacy-window-ethereum", + name: "Browser wallet", + icon: "", + rdns: undefined, + provider: ethereum, + isMetaMask: !!ethereum.isMetaMask, + isPhantom: false, + }, + ] }, [providers]) return {