simple Rainbowkit integration

Signed-off-by: Stefan <[email protected]>

apps/frontend/.env.sample

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_INFURA_ID=
+NEXT_PUBLIC_ALCHEMY_KEY=

apps/frontend/components/Header.tsx

@@ -0,0 +1,21 @@
+import { Flex, Text } from "@chakra-ui/react"
+import React from "react"
+import "@rainbow-me/rainbowkit/styles.css"
+import { ConnectButton } from "@rainbow-me/rainbowkit"
+
+export const Header = () => {
+  return (
+    <Flex
+      w="full"
+      pb={2}
+      my={4}
+      align="center"
+      justify="space-between"
+      borderBottomWidth="1px"
+      borderBottomColor="gray.200"
+    >
+      <Text>@app</Text>
+      <ConnectButton />
+    </Flex>
+  )
+}

apps/frontend/package.json

@@ -9,19 +9,27 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@app/contracts": "*",
+    "@chakra-ui/react": "^2.4.6",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
     "@next/font": "13.1.1",
+    "@rainbow-me/rainbowkit": "^0.8.1",
     "@types/node": "18.11.18",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",
     "eslint": "8.31.0",
     "eslint-config-next": "13.1.1",
+    "ethers": "^5.7.2",
+    "framer-motion": "^8.2.4",
     "next": "13.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "4.9.4"
+    "typescript": "4.9.4",
+    "wagmi": "^0.10.6"
   },
   "devDependencies": {
-    "ts-config-app": "*",
-    "eslint-config-app": "*"
+    "eslint-config-app": "*",
+    "ts-config-app": "*"
   }
 }

apps/frontend/pages/_app.tsx

@@ -1,5 +1,74 @@
+import { ChakraProvider, Container } from "@chakra-ui/react"
+import {
+  connectorsForWallets,
+  RainbowKitProvider,
+} from "@rainbow-me/rainbowkit"
+import {
+  coinbaseWallet,
+  metaMaskWallet,
+  trustWallet,
+  walletConnectWallet,
+} from "@rainbow-me/rainbowkit/wallets"
+import { Provider, WebSocketProvider } from "@wagmi/core"
 import type { AppProps } from "next/app"
+import { Client, configureChains, createClient, WagmiConfig } from "wagmi"
 
+import { Inter } from "@next/font/google"
+import { useEffect, useState } from "react"
+import { foundry, mainnet } from "wagmi/chains"
+import { alchemyProvider } from "wagmi/providers/alchemy"
+import { publicProvider } from "wagmi/providers/public"
+import { Header } from "../components/Header"
+import { theme } from "./theme"
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter" })
+
+const { chains, provider } = configureChains(
+  [mainnet, foundry],
+  [
+    alchemyProvider({
+      apiKey: process.env.NEXT_PUBLIC_ALCHEMY_KEY as string,
+    }),
+    publicProvider(),
+  ]
+)
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  const [client, setClient] = useState<
+    any & Client<Provider, WebSocketProvider>
+  >()
+
+  useEffect(() => {
+    const connectors = connectorsForWallets([
+      {
+        groupName: "Wallets",
+        wallets: [
+          metaMaskWallet({ chains }),
+          walletConnectWallet({ chains }),
+          trustWallet({ chains }),
+          coinbaseWallet({ appName: "@app", chains: chains }),
+        ],
+      },
+    ])
+
+    const wagmiClient = createClient({
+      autoConnect: false,
+      connectors,
+      provider,
+    })
+    setClient(wagmiClient)
+  }, [])
+
+  return (
+    <ChakraProvider theme={theme}>
+      {client && (
+        <WagmiConfig client={client}>
+          <RainbowKitProvider chains={chains}>
+            <Container maxW="container.lg" my={1} className={inter.className}>
+              <Header />
+              <Component {...pageProps} />
+            </Container>
+          </RainbowKitProvider>
+        </WagmiConfig>
+      )}
+    </ChakraProvider>
+  )
 }

apps/frontend/pages/_document.tsx

@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from "next/document"
 
 export default function Document() {
   return (

apps/frontend/pages/index.tsx

@@ -1,7 +1,12 @@
-import { Inter } from "@next/font/google"
-
-const inter = Inter({ subsets: ["latin"] })
+import { Flex, Text } from "@chakra-ui/react"
+import { useAccount } from "wagmi"
 
 export default function Home() {
-  return <main>foo</main>
+  const { address } = useAccount()
+
+  return (
+    <Flex>
+      <Text>{address}</Text>
+    </Flex>
+  )
 }

apps/frontend/pages/theme.ts

@@ -0,0 +1,3 @@
+import { extendTheme } from "@chakra-ui/react"
+
+export const theme = extendTheme({})