WIP ConnectKit

packages/app/codegen/subgraph.ts

@@ -154,8 +154,8 @@ export type _Block_ = {
   readonly hash?: Maybe<Scalars['Bytes']>;
   /** The block number */
   readonly number: Scalars['Int'];
-  /** Timestamp of the block if available, format depends on the chain */
-  readonly timestamp?: Maybe<Scalars['String']>;
+  /** Integer representation of the timestamp stored in blocks for the chain */
+  readonly timestamp?: Maybe<Scalars['Int']>;
 };
 
 /** The type for the top-level _meta field */

packages/app/package.json

@@ -17,9 +17,9 @@
     "@ethersproject/address": "5.7.0",
     "@ethersproject/contracts": "5.7.0",
     "@ethersproject/providers": "5.7.0",
-    "@rainbow-me/rainbowkit": "0.5.2",
     "@web3-scaffold/contracts": "workspace:*",
     "classnames": "^2.3.1",
+    "connectkit": "^0.0.2",
     "ethers": "5.7.0",
     "graphql": "^16.6.0",
     "next": "12.3.0",

packages/app/src/EthereumProviders.tsx

@@ -1,15 +1,5 @@
-import "@rainbow-me/rainbowkit/styles.css";
-
-import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";
-import {
-  chain,
-  configureChains,
-  createClient,
-  defaultChains,
-  WagmiConfig,
-} from "wagmi";
-import { alchemyProvider } from "wagmi/providers/alchemy";
-import { publicProvider } from "wagmi/providers/public";
+import { ConnectKitProvider, getDefaultClient } from "connectkit";
+import { createClient, defaultChains, WagmiConfig } from "wagmi";
 
 // Will default to goerli if nothing set in the ENV
 export const targetChainId =
@@ -21,28 +11,16 @@ const targetChains = defaultChains.filter(
   (chain) => chain.id === 1 || chain.id === targetChainId
 );
 
-export const { chains, provider, webSocketProvider } = configureChains(
-  targetChains,
-  [
-    alchemyProvider({ alchemyId: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY }),
-    publicProvider(),
-  ]
+export const wagmiClient = createClient(
+  getDefaultClient({
+    appName: "Web3 App",
+    alchemyId: process.env.NEXT_PUBLIC_ALCHEMY_API_KEY,
+    chains: targetChains,
+  })
 );
 
-const { connectors } = getDefaultWallets({
-  appName: "Example NFT",
-  chains,
-});
-
-export const wagmiClient = createClient({
-  autoConnect: true,
-  connectors,
-  provider,
-  webSocketProvider,
-});
-
 export const EthereumProviders: React.FC = ({ children }) => (
   <WagmiConfig client={wagmiClient}>
-    <RainbowKitProvider chains={chains}>{children}</RainbowKitProvider>
+    <ConnectKitProvider>{children}</ConnectKitProvider>
   </WagmiConfig>
 );

packages/app/src/contracts.ts

@@ -2,7 +2,7 @@ import ExampleNFTGoerli from "@web3-scaffold/contracts/deploys/goerli/ExampleNFT
 import { ExampleNFT__factory } from "@web3-scaffold/contracts/types";
 import { useContractRead } from "wagmi";
 
-import { provider, targetChainId } from "./EthereumProviders";
+import { wagmiClient } from "./EthereumProviders";
 
 // I would have used `ExampleNFT__factory.connect` to create this, but we may
 // not have a provider ready to go. Any interactions with this contract should
@@ -15,7 +15,7 @@ import { provider, targetChainId } from "./EthereumProviders";
 
 export const exampleNFTContract = ExampleNFT__factory.connect(
   ExampleNFTGoerli.deployedTo,
-  provider({ chainId: targetChainId })
+  wagmiClient.provider
 );
 
 export const useExampleNFTContractRead = (

packages/app/src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { ConnectKitButton } from "connectkit";
 import type { NextPage } from "next";
 
 import { useExampleNFTContractRead } from "../contracts";
@@ -18,7 +18,7 @@ const HomePage: NextPage = () => {
   return (
     <div className="min-h-screen flex flex-col">
       <div className="self-end p-2">
-        <ConnectButton />
+        <ConnectKitButton />
       </div>
       <div className="flex-grow flex flex-col gap-4 items-center justify-center p-8 pb-[50vh]">
         <h1 className="text-4xl">Example NFT</h1>