include more chain logos (#151)

* add additional chain icons

* add chain test page

* testbench code style

* more logos

* remove duplicate

* fix type

* useChains

* testnet icon cleanup

* testbench cleanup

* testbench cleanup

* remove duplicate testbench data

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 (
+    <>
+      <main>
+        <div className="panel">
+          <h1>Chains</h1>
+          <h2>Connected to</h2>
+          <ChainIcon id={chain?.id} unsupported={chain?.unsupported} />
+          <h2>Configured/Supported Chains</h2>
+          <div style={{ display: 'flex', gap: 8 }}>
+            {chains.map((chain) => (
+              <ChainIcon key={chain.id} id={chain.id} />
+            ))}
+          </div>
+          <h2>{`<ChainIcon /> Component`}</h2>
+          <div style={{ display: 'flex', gap: 8 }}>
+            <ChainIcon id={10} size={16} />
+            <ChainIcon id={10} size={16} unsupported />
+            <ChainIcon id={10} radius={8} size={16} unsupported />
+            <ChainIcon id={10} radius={'0'} size={16} unsupported />
+          </div>
+          <div style={{ display: 'flex', gap: 8 }}>
+            <ChainIcon id={42161} />
+            <ChainIcon id={42161} unsupported />
+            <ChainIcon id={42161} radius={8} unsupported />
+            <ChainIcon id={42161} radius={'0'} unsupported />
+          </div>
+          <div style={{ display: 'flex', gap: 8 }}>
+            <ChainIcon id={137} size={'32'} />
+            <ChainIcon id={137} size={32} unsupported />
+            <ChainIcon id={137} radius={8} size={32} unsupported />
+            <ChainIcon id={137} radius={'0'} size={32} unsupported />
+          </div>
+          <div style={{ display: 'flex', gap: 8 }}>
+            <ChainIcon id={43113} size={64} />
+            <ChainIcon id={43113} size={64} unsupported />
+            <ChainIcon id={43113} radius={8} size={64} unsupported />
+            <ChainIcon id={43113} radius={'0'} size={64} unsupported />
+          </div>
+          <div
+            style={{
+              aspectRatio: '1/1',
+              resize: 'horizontal',
+              width: 64,
+              overflow: 'auto',
+            }}
+          >
+            <ChainIcon id={randomChainId} size={'100%'} />
+          </div>
+        </div>
+        <div className="panel">
+          <h2>All Chains</h2>
+          <div
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+              gap: 8,
+            }}
+          >
+            {allChains.map((chain) => (
+              <div
+                key={chain.id}
+                style={{ display: 'flex', gap: 8, alignItems: 'center' }}
+              >
+                <ChainIcon id={chain.id} size={42} />
+                <span>
+                  {chain.name} <code>{chain.id}</code>
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </main>
+      <aside>
+        <Link href="/">&larr; Testbench</Link>
+        <ConnectKitButton />
+      </aside>
+    </>
+  );
+};
+
+export default Home;

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 = () => {
           </div>
           <h2>dApps configured chains</h2>
           <div style={{ display: 'flex', gap: 8 }}>
-            {chains.map((chain: Chain) => (
+            {chains.map((chain: wagmiChains.Chain) => (
               <ChainIcon key={chain.id} id={chain.id} />
             ))}
           </div>
+          <Link href="/chains">Chains Testbench &rarr;</Link>
         </div>
 
         <div className="panel">

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;