|
| 1 | +import { createEVMClient } from '@metamask/connect-evm'; |
| 2 | +import dappMetadata from './dapp-metadata'; |
| 3 | +import globalContext, { |
| 4 | + handleNewAccounts, |
| 5 | + handleNewProviderDetail, |
| 6 | + removeProviderDetail, |
| 7 | + setActiveProviderDetail, |
| 8 | + updateFormElements, |
| 9 | +} from '.'; |
| 10 | + |
| 11 | +export const CONNECT_EVM_PROVIDER_UUID = 'connect-evm'; |
| 12 | + |
| 13 | +export const CONNECT_EVM_SUPPORTED_NETWORKS = { |
| 14 | + '0x1': 'https://ethereum.publicnode.com', |
| 15 | + '0xaa36a7': 'https://ethereum-sepolia.publicnode.com', |
| 16 | + '0xa': 'https://optimism.publicnode.com', |
| 17 | + '0x89': 'https://polygon-bor-rpc.publicnode.com', |
| 18 | + '0x2105': 'https://base.publicnode.com', |
| 19 | + '0xa4b1': 'https://arbitrum-one.publicnode.com', |
| 20 | + '0xa86a': 'https://avalanche-c-chain-rpc.publicnode.com', |
| 21 | + '0x38': 'https://bsc-dataseed.binance.org', |
| 22 | + '0x539': 'http://127.0.0.1:8545', |
| 23 | + '0x53a': 'http://127.0.0.1:8546', |
| 24 | +}; |
| 25 | + |
| 26 | +export const CONNECT_EVM_CHAIN_IDS = Object.keys( |
| 27 | + CONNECT_EVM_SUPPORTED_NETWORKS, |
| 28 | +); |
| 29 | + |
| 30 | +let connectEvmClientPromise; |
| 31 | + |
| 32 | +const noop = () => undefined; |
| 33 | + |
| 34 | +async function getConnectEvmClient() { |
| 35 | + if (!connectEvmClientPromise) { |
| 36 | + connectEvmClientPromise = createEVMClient({ |
| 37 | + dapp: dappMetadata, |
| 38 | + api: { |
| 39 | + supportedNetworks: CONNECT_EVM_SUPPORTED_NETWORKS, |
| 40 | + }, |
| 41 | + }); |
| 42 | + } |
| 43 | + |
| 44 | + try { |
| 45 | + return await connectEvmClientPromise; |
| 46 | + } catch (err) { |
| 47 | + connectEvmClientPromise = undefined; |
| 48 | + throw err; |
| 49 | + } |
| 50 | +} |
| 51 | + |
| 52 | +function getConnectEvmProviderDetail(provider, name) { |
| 53 | + return { |
| 54 | + info: { |
| 55 | + uuid: CONNECT_EVM_PROVIDER_UUID, |
| 56 | + name, |
| 57 | + icon: './metamask-fox.svg', |
| 58 | + rdns: 'io.metamask', |
| 59 | + }, |
| 60 | + provider, |
| 61 | + }; |
| 62 | +} |
| 63 | + |
| 64 | +function setConnectedButtonState(button) { |
| 65 | + button.innerText = 'MetaMask Connect - Disconnect'; |
| 66 | + button.classList.remove('btn-primary'); |
| 67 | + button.classList.add('btn-danger'); |
| 68 | +} |
| 69 | + |
| 70 | +function setDisconnectedButtonState(button) { |
| 71 | + button.innerText = 'MetaMask Connect'; |
| 72 | + button.classList.add('btn-primary'); |
| 73 | + button.classList.remove('btn-danger'); |
| 74 | +} |
| 75 | + |
| 76 | +export async function handleConnectEvm( |
| 77 | + name, |
| 78 | + button, |
| 79 | + isConnected, |
| 80 | + updateConnectionState = noop, |
| 81 | +) { |
| 82 | + button.disabled = true; |
| 83 | + |
| 84 | + try { |
| 85 | + const client = await getConnectEvmClient(); |
| 86 | + |
| 87 | + if (isConnected) { |
| 88 | + await client.disconnect(); |
| 89 | + updateConnectionState(false); |
| 90 | + const activeProviderRemoved = removeProviderDetail(name); |
| 91 | + setDisconnectedButtonState(button); |
| 92 | + if (activeProviderRemoved) { |
| 93 | + updateFormElements(); |
| 94 | + } |
| 95 | + return; |
| 96 | + } |
| 97 | + |
| 98 | + const { accounts } = await client.connect({ |
| 99 | + chainIds: CONNECT_EVM_CHAIN_IDS, |
| 100 | + }); |
| 101 | + const provider = client.getProvider(); |
| 102 | + |
| 103 | + const providerDetail = getConnectEvmProviderDetail(provider, name); |
| 104 | + await setActiveProviderDetail(providerDetail); |
| 105 | + handleNewProviderDetail(providerDetail); |
| 106 | + updateConnectionState(true); |
| 107 | + setConnectedButtonState(button); |
| 108 | + updateFormElements(); |
| 109 | + handleNewAccounts(accounts); |
| 110 | + globalContext.connected = true; |
| 111 | + } catch (err) { |
| 112 | + console.error('Error connecting with MetaMask Connect EVM', err); |
| 113 | + if (isConnected) { |
| 114 | + setConnectedButtonState(button); |
| 115 | + } else { |
| 116 | + setDisconnectedButtonState(button); |
| 117 | + } |
| 118 | + } finally { |
| 119 | + button.disabled = false; |
| 120 | + } |
| 121 | +} |
0 commit comments