diff --git a/examples/testbench/src/pages/chains.tsx b/examples/testbench/src/pages/chains.tsx new file mode 100644 index 00000000..f5be7c3d --- /dev/null +++ b/examples/testbench/src/pages/chains.tsx @@ -0,0 +1,113 @@ +import type { NextPage } from 'next'; +import Link from 'next/link'; + +import { useEffect, useState } from 'react'; + +import { ConnectKitButton, ChainIcon, useChains } from 'connectkit'; + +import { useNetwork } from 'wagmi'; +import * as wagmiChains from 'wagmi/chains'; +const allChains = Object.keys(wagmiChains).map( + (key) => wagmiChains[key as keyof typeof wagmiChains] +); + +const Home: NextPage = () => { + const [mounted, setMounted] = useState(false); + useEffect(() => setMounted(true), []); + + const [randomChainId, setRandomChainId] = useState(1); + useEffect(() => { + const interval = setInterval(() => { + setRandomChainId( + allChains[Math.floor(Math.random() * allChains.length)].id + ); + }, 1000); + return () => clearInterval(interval); + }, []); + + const { chain } = useNetwork(); + const chains = useChains(); + + if (!mounted) return null; + + return ( + <> +
+
+

Chains

+

Connected to

+ +

Configured/Supported Chains

+
+ {chains.map((chain) => ( + + ))} +
+

{` Component`}

+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ +
+
+
+

All Chains

+
+ {allChains.map((chain) => ( +
+ + + {chain.name} {chain.id} + +
+ ))} +
+
+
+ + + ); +}; + +export default Home; diff --git a/examples/testbench/src/pages/index.tsx b/examples/testbench/src/pages/index.tsx index e573c01e..e0c8f0c3 100644 --- a/examples/testbench/src/pages/index.tsx +++ b/examples/testbench/src/pages/index.tsx @@ -27,13 +27,18 @@ import { useConnect, useDisconnect, } from 'wagmi'; -import { Chain } from 'wagmi/chains'; +import * as wagmiChains from 'wagmi/chains'; import { useTestBench } from '../TestbenchProvider'; import { Checkbox, Textbox, Select, SelectProps } from '../components/inputs'; + import CustomAvatar from '../components/CustomAvatar'; import CustomSIWEButton from '../components/CustomSIWEButton'; +const allChains = Object.keys(wagmiChains).map( + (key) => wagmiChains[key as keyof typeof wagmiChains] +); + /** TODO: import this data from the connectkit module */ const themes: SelectProps[] = [ { label: 'Auto', value: 'auto' }, @@ -305,10 +310,11 @@ const Home: NextPage = () => {

dApps configured chains

- {chains.map((chain: Chain) => ( + {chains.map((chain: wagmiChains.Chain) => ( ))}
+ Chains Testbench →
diff --git a/examples/testbench/src/styles/globals.css b/examples/testbench/src/styles/globals.css index 9a9a1470..103b48fb 100644 --- a/examples/testbench/src/styles/globals.css +++ b/examples/testbench/src/styles/globals.css @@ -70,6 +70,10 @@ main { aside { z-index: 2147483647; position: fixed; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; overflow-x: hidden; overflow-y: scroll; top: 0; @@ -79,6 +83,17 @@ aside { padding: 32px; background: #fff; } + +code { + padding: 2px 4px; + border-radius: 4px; + color: gray; + background: #f5f5f5; + font-size: 12px; + font-weight: bold; + font-family: 'Courier New', Courier, monospace; +} + @media screen and (max-width: 768px) { main { padding: 32px; diff --git a/packages/connectkit/src/assets/chains.tsx b/packages/connectkit/src/assets/chains.tsx index 68123797..8d889d99 100644 --- a/packages/connectkit/src/assets/chains.tsx +++ b/packages/connectkit/src/assets/chains.tsx @@ -2,6 +2,64 @@ type Logo = { testnet?: boolean; }; +const KnownChain = ({ testnet, ...props }: Logo) => ( + +); +const UnknownChain = ({ testnet, ...props }: Logo) => { + return ; +}; + export const Ethereum = ({ testnet, ...props }: Logo) => { let bg = 'var(--ck-chain-ethereum-01, #25292E)'; let fill = 'var(--ck-chain-ethereum-02, #ffffff)'; @@ -145,7 +203,7 @@ export const Arbitrum = ({ testnet, ...props }: Logo) => { ); }; -const UnknownChain = ({ ...props }) => ( +export const Telos = ({ testnet, ...props }: Logo) => ( +); + +const Aurora = ({ testnet, ...props }: { testnet?: boolean }) => ( + +); + +const Avalanche = ({ testnet, ...props }: { testnet?: boolean }) => ( + +); + +const Celo = ({ testnet, ...props }: { testnet?: boolean }) => ( + +); + +const Gnosis = ({ testnet, ...props }: { testnet?: boolean }) => ( + +); + +const Evmos = ({ testnet, ...props }: { testnet?: boolean }) => ( + +); + +const BinanceSmartChain = ({ testnet, ...props }: { testnet?: boolean }) => ( + +); + +const Canto = ({ testnet, ...props }: { testnet?: boolean }) => ( + +); + +const Fantom = ({ testnet, ...props }: { testnet?: boolean }) => ( + +); + +const Filecoin = ({ testnet, ...props }: { testnet?: boolean }) => ( + +); + +const IoTeX = ({ testnet, ...props }: { testnet?: boolean }) => ( + +); + +const Metis = ({ testnet, ...props }: { testnet?: boolean }) => ( + ); export default { + UnknownChain, Ethereum, Polygon, Optimism, Arbitrum, - UnknownChain, + Aurora, + Avalanche, + Celo, + Telos, + Gnosis, + Evmos, + BinanceSmartChain, + Foundry: KnownChain, + Sepolia: KnownChain, + Taraxa: KnownChain, + zkSync: KnownChain, + Flare: KnownChain, + Canto, + Fantom, + Filecoin, + Metis, + IoTeX, }; diff --git a/packages/connectkit/src/constants/supportedChains.tsx b/packages/connectkit/src/constants/supportedChains.tsx index 9e0025bc..ab69ec5d 100644 --- a/packages/connectkit/src/constants/supportedChains.tsx +++ b/packages/connectkit/src/constants/supportedChains.tsx @@ -38,6 +38,11 @@ const supportedChains: Chain[] = [ name: 'Optimism Kovan', logo: , }, + { + id: 420, // nice + name: 'Optimism Goerli', + logo: , + }, { id: 137, name: 'Polygon', @@ -73,6 +78,161 @@ const supportedChains: Chain[] = [ name: 'Arbitrum Goerli', logo: , }, + { + id: 40, + name: 'Telos', + logo: , + }, + { + id: 41, + name: 'Telos Testnet', + logo: , + }, + { + id: 1313161554, + name: 'Aurora', + logo: , + }, + { + id: 1313161555, + name: 'Aurora Testnet', + logo: , + }, + { + id: 43_114, + name: 'Avalanche', + logo: , + }, + { + id: 43_113, + name: 'Avalanche Fuji', + logo: , + }, + { + id: 31337, + name: 'Foundry', + logo: , + }, + { + id: 100, + name: 'Gnosis', + logo: , + }, + { + id: 9001, + name: 'Evmos', + logo: , + }, + { + id: 9000, + name: 'Evmos Testnet', + logo: , + }, + { + id: 56, + name: 'BNB Smart Chain', + logo: , + }, + { + id: 97, + name: 'Binance Smart Chain Testnet', + logo: , + }, + { + id: 11155111, + name: 'Sepolia', + logo: , + }, + { + id: 841, + name: 'Taraxa', + logo: , + }, + { + id: 842, + name: 'Taraxa Testnet', + logo: , + }, + { + id: 324, + name: 'zkSync', + logo: , + }, + { + id: 280, + name: 'zkSync Testnet', + logo: , + }, + { + id: 42_220, + name: 'Celo', + logo: , + }, + { + id: 44_787, + name: 'Celo Alfajores', + logo: , + }, + { + id: 7_700, + name: 'Canto', + logo: , + }, + { + id: 250, + name: 'Fantom', + logo: , + }, + { + id: 4_002, + name: 'Fantom Testnet', + logo: , + }, + { + id: 14, + name: 'Flare', + logo: , + }, + { + id: 114, + name: 'Coston2', + logo: , + }, + { + id: 314, + name: 'Filecoin', + logo: , + }, + { + id: 314_1, + name: 'Filecoin Hyperspace', + logo: , + }, + { + id: 314_159, + name: 'Filecoin Calibration', + logo: , + }, + { + id: 1_088, + name: 'Metis', + logo: , + }, + { + id: 599, + name: 'Metis Goerli', + logo: , + }, + { + id: 4_689, + name: 'IoTeX', + logo: , + }, + { + id: 4_690, + name: 'IoTeX Testnet', + logo: , + }, ]; export default supportedChains;