feat: allow adding to server side components

- adding use-client allow us to add hooks on server side components - adding use-client based on reactjs/rfcs#227 - updated readme to include example on adding nextjs 13 with app folder
nagrawal3 · Jan 26, 2023 · 0f3c047 · 0f3c047
1 parent 33ce598
commit 0f3c047
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -71,6 +71,58 @@ export default function App({ Component, pageProps }: AppProps) {
 }
 ```
 
+If you are using `Next.js` version `13` with `app` directory, updated `layout.jsx` will look like this:
+
+```
+import {
+  getDefaultWallets,
+  RainbowKitProvider,
+} from '@rainbow-me/rainbowkit';
+import { configureChains, createClient, WagmiConfig } from 'wagmi';
+import { mainnet, polygon, optimism, arbitrum } from 'wagmi/chains';
+import { publicProvider } from 'wagmi/providers/public';
+import './globals.css'
+
+const { chains, provider } = configureChains(
+  [mainnet, polygon, optimism, arbitrum],
+  [publicProvider()]
+);
+
+const { connectors } = getDefaultWallets({
+  appName: 'My RainbowKit App',
+  chains
+});
+
+const wagmiClient = createClient({
+  autoConnect: true,
+  connectors,
+  provider
+})
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      {/*
+        <head /> will contain the components returned by the nearest parent
+        head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
+      */}
+      <head />
+      <body>
+        <WagmiConfig client={wagmiClient}>
+          <RainbowKitProvider chains={chains}>
+            {children}
+          </RainbowKitProvider>
+        </WagmiConfig>
+      </body>
+    </html>
+  )
+}
+```
+
 ...and you should have added a `<ConnectButton />` somewhere in your application.
 
 ### Setup UseSIWE

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,3 +1,4 @@
+"use-client";
 import {
   createAuthenticationAdapter,
   RainbowKitAuthenticationProvider,