|
1 | | -import { ConnectButton } from "@rainbow-me/rainbowkit"; |
2 | | - |
3 | 1 | import "./App.css"; |
4 | 2 |
|
| 3 | +import { useEffect, useMemo, useRef, useState } from "react"; |
| 4 | +import { createWalletClient, custom, type Address, type Chain } from "viem"; |
| 5 | +import { getAddresses, requestAddresses } from "viem/actions"; |
| 6 | +import { |
| 7 | + mainnet, |
| 8 | + sepolia, |
| 9 | + base, |
| 10 | + baseSepolia, |
| 11 | + optimism, |
| 12 | + optimismSepolia, |
| 13 | + arbitrum, |
| 14 | + arbitrumSepolia, |
| 15 | + polygon, |
| 16 | +} from "viem/chains"; |
| 17 | +import "viem/window"; |
| 18 | +import { Porto } from "porto"; |
| 19 | + |
| 20 | +type WalletKind = "injected" | "porto"; |
| 21 | + |
| 22 | +// Known chains for naming/config if we recognize the id |
| 23 | +const CHAINS: Chain[] = [ |
| 24 | + mainnet, |
| 25 | + sepolia, |
| 26 | + base, |
| 27 | + baseSepolia, |
| 28 | + optimism, |
| 29 | + optimismSepolia, |
| 30 | + arbitrum, |
| 31 | + arbitrumSepolia, |
| 32 | + polygon, |
| 33 | +]; |
| 34 | + |
| 35 | +const byId = (id: number) => CHAINS.find((c) => c.id === id); |
| 36 | + |
5 | 37 | export const App = () => { |
| 38 | + const injectedProvider = |
| 39 | + (typeof window !== "undefined" ? (window as any).ethereum : undefined) || |
| 40 | + undefined; |
| 41 | + |
| 42 | + const portoRef = useRef<any>(null); |
| 43 | + const portoProvider = useMemo(() => { |
| 44 | + try { |
| 45 | + if (!portoRef.current) portoRef.current = Porto.create(); |
| 46 | + return portoRef.current.provider; |
| 47 | + } catch { |
| 48 | + return undefined; |
| 49 | + } |
| 50 | + }, []); |
| 51 | + |
| 52 | + const [walletKind, setWalletKind] = useState<WalletKind>( |
| 53 | + injectedProvider ? "injected" : "porto" |
| 54 | + ); |
| 55 | + const provider = walletKind === "injected" ? injectedProvider : portoProvider; |
| 56 | + |
| 57 | + const [walletChainId, setWalletChainId] = useState<number | undefined>( |
| 58 | + undefined |
| 59 | + ); |
| 60 | + const [walletChain, setWalletChain] = useState<Chain | undefined>(undefined); |
| 61 | + |
| 62 | + const walletClient = useMemo( |
| 63 | + () => |
| 64 | + provider |
| 65 | + ? createWalletClient({ |
| 66 | + chain: walletChain, |
| 67 | + transport: custom(provider), |
| 68 | + }) |
| 69 | + : undefined, |
| 70 | + [provider, walletChain] |
| 71 | + ); |
| 72 | + |
| 73 | + const [account, setAccount] = useState<Address>(); |
| 74 | + |
| 75 | + useEffect(() => { |
| 76 | + if (!provider) { |
| 77 | + setAccount(undefined); |
| 78 | + setWalletChainId(undefined); |
| 79 | + setWalletChain(undefined); |
| 80 | + return; |
| 81 | + } |
| 82 | + |
| 83 | + const onAccountsChanged = (accts: string[]) => { |
| 84 | + setAccount((accts?.[0] as Address) || undefined); |
| 85 | + }; |
| 86 | + |
| 87 | + const onChainChanged = (hex: string) => { |
| 88 | + const id = parseInt(hex, 16); |
| 89 | + setWalletChainId(id); |
| 90 | + setWalletChain(byId(id)); |
| 91 | + }; |
| 92 | + |
| 93 | + provider.on?.("accountsChanged", onAccountsChanged); |
| 94 | + provider.on?.("chainChanged", onChainChanged); |
| 95 | + |
| 96 | + return () => { |
| 97 | + provider.removeListener?.("accountsChanged", onAccountsChanged); |
| 98 | + provider.removeListener?.("chainChanged", onChainChanged); |
| 99 | + }; |
| 100 | + }, [provider]); |
| 101 | + |
| 102 | + useEffect(() => { |
| 103 | + (async () => { |
| 104 | + if (!provider) return; |
| 105 | + |
| 106 | + try { |
| 107 | + const hex = await provider.request({ method: "eth_chainId" }); |
| 108 | + const id = parseInt(hex as string, 16); |
| 109 | + setWalletChainId(id); |
| 110 | + setWalletChain(byId(id)); |
| 111 | + } catch { |
| 112 | + setWalletChainId(undefined); |
| 113 | + setWalletChain(undefined); |
| 114 | + } |
| 115 | + |
| 116 | + if (walletClient) { |
| 117 | + try { |
| 118 | + const addrs = await getAddresses(walletClient); |
| 119 | + setAccount((addrs?.[0] as Address) || undefined); |
| 120 | + } catch { |
| 121 | + setAccount(undefined); |
| 122 | + } |
| 123 | + } |
| 124 | + })(); |
| 125 | + }, [provider, walletClient]); |
| 126 | + |
| 127 | + const connect = async () => { |
| 128 | + if (!walletClient) return; |
| 129 | + |
| 130 | + const addrs = await requestAddresses(walletClient); |
| 131 | + setAccount(addrs[0] as Address); |
| 132 | + |
| 133 | + try { |
| 134 | + const hex = await provider!.request({ method: "eth_chainId" }); |
| 135 | + const id = parseInt(hex as string, 16); |
| 136 | + setWalletChainId(id); |
| 137 | + setWalletChain(byId(id)); |
| 138 | + } catch {} |
| 139 | + }; |
| 140 | + |
| 141 | + const disconnect = async () => { |
| 142 | + setAccount(undefined); |
| 143 | + |
| 144 | + try { |
| 145 | + await walletClient?.transport.request({ |
| 146 | + method: "wallet_revokePermissions", |
| 147 | + params: [{ eth_accounts: {} }], |
| 148 | + }); |
| 149 | + } catch {} |
| 150 | + }; |
| 151 | + |
| 152 | + const injectedAvailable = !!injectedProvider; |
| 153 | + const portoAvailable = !!portoProvider; |
| 154 | + const providerAvailable = !!provider; |
| 155 | + |
6 | 156 | return ( |
7 | | - <> |
8 | | - <div className="container"> |
9 | | - <img src="/banner.png" alt="Foundry" className="banner" /> |
10 | | - <ConnectButton /> |
11 | | - </div> |
12 | | - </> |
| 157 | + <div className="container"> |
| 158 | + <h1>Foundry</h1> |
| 159 | + |
| 160 | + <label style={{ display: "block", marginBottom: 8 }}> |
| 161 | + Wallet: |
| 162 | + <select |
| 163 | + value={walletKind} |
| 164 | + onChange={(e) => setWalletKind(e.target.value as WalletKind)} |
| 165 | + > |
| 166 | + <option value="injected" disabled={!injectedAvailable}> |
| 167 | + Injected {injectedAvailable ? "" : "(not detected)"} |
| 168 | + </option> |
| 169 | + <option value="porto" disabled={!portoAvailable}> |
| 170 | + Porto {portoAvailable ? "" : "(unavailable)"} |
| 171 | + </option> |
| 172 | + </select> |
| 173 | + </label> |
| 174 | + |
| 175 | + {account && ( |
| 176 | + <div style={{ marginBottom: 12 }}> |
| 177 | + Wallet chain:{" "} |
| 178 | + <b> |
| 179 | + {walletChain |
| 180 | + ? `${walletChain.name} (${walletChainId ?? "unknown"})` |
| 181 | + : ""} |
| 182 | + </b> |
| 183 | + </div> |
| 184 | + )} |
| 185 | + |
| 186 | + {account ? ( |
| 187 | + <> |
| 188 | + <div style={{ marginBottom: 8 }}>Connected: {account}</div> |
| 189 | + <div style={{ display: "flex", gap: 8 }}> |
| 190 | + <button onClick={disconnect}>Disconnect</button> |
| 191 | + </div> |
| 192 | + </> |
| 193 | + ) : ( |
| 194 | + <button onClick={connect} disabled={!providerAvailable}> |
| 195 | + {providerAvailable ? "Connect Wallet" : "No Provider Available"} |
| 196 | + </button> |
| 197 | + )} |
| 198 | + </div> |
13 | 199 | ); |
14 | 200 | }; |
0 commit comments