Merge pull request #14 from spruceid/feat/updated-dependencies

Removes rainbow kit and update dependencies

components/header.tsx

@@ -1,5 +1,6 @@
-import { signIn, signOut, useSession } from "next-auth/react"
+import { signOut, useSession } from "next-auth/react"
 import Link from "next/link"
+import { useDisconnect } from "wagmi"
 import styles from "./header.module.css"
 
 // The approach used in this component shows how to build a sign in and sign out
@@ -8,6 +9,7 @@ import styles from "./header.module.css"
 export default function Header() {
   const { data: session, status } = useSession()
   const loading = status === "loading"
+  const { disconnect } = useDisconnect()
 
   return (
     <header>
@@ -43,6 +45,7 @@ export default function Header() {
                 className={styles.button}
                 onClick={(e) => {
                   e.preventDefault()
+                  disconnect()
                   signOut()
                 }}
               >
@@ -68,4 +71,4 @@ export default function Header() {
       </nav>
     </header>
   )
-}
+}

package.json

@@ -1,44 +1,35 @@
 {
-  "name": "next-auth-example",
-  "version": "0.0.0",
   "private": true,
-  "description": "An example project for NextAuth.js",
+  "description": "An example project for NextAuth.js with Next.js",
   "repository": "https://github.com/nextauthjs/next-auth-example.git",
   "bugs": {
     "url": "https://github.com/nextauthjs/next-auth/issues"
   },
   "homepage": "https://next-auth-example.vercel.app",
-  "main": "",
   "scripts": {
     "dev": "next",
     "build": "next build",
-    "start": "next start",
-    "types": "tsc --noEmit"
+    "start": "next start"
   },
   "author": "Iain Collins <[email protected]>",
   "contributors": [
     "Balázs Orbán <[email protected]>",
     "Nico Domino <[email protected]>",
     "Lluis Agusti <[email protected]>"
   ],
-  "license": "ISC",
   "dependencies": {
-    "@rainbow-me/rainbowkit": "^0.4.1",
-    "ethers": "^5.6.8",
-    "next": "^12.0.11-canary.4",
-    "next-auth": "4.10.3",
-    "nodemailer": "^6.6.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "ethers": "^5.7.1",
+    "next": "latest",
+    "next-auth": "^4.12.2",
+    "nodemailer": "^6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "siwe": "^2.0.5",
-    "wagmi": "^0.6.6"
+    "wagmi": "^0.6.7"
   },
   "devDependencies": {
-    "@types/node": "^17.0.14",
-    "@types/react": "^17.0.39",
-    "typescript": "^4.5.5"
-  },
-  "prettier": {
-    "semi": false
+    "@types/node": "^17",
+    "@types/react": "^18.0.15",
+    "typescript": "^4"
   }
 }

pages/_app.tsx

@@ -1,44 +1,33 @@
+import { Session } from "next-auth"
 import { SessionProvider } from "next-auth/react"
 import type { AppProps } from "next/app"
 import { WagmiConfig, createClient, configureChains, chain } from "wagmi"
 import { publicProvider } from "wagmi/providers/public"
-import { connectorsForWallets, wallet } from "@rainbow-me/rainbowkit"
-import { RainbowKitProvider } from "@rainbow-me/rainbowkit"
 import "./styles.css"
 
 export const { chains, provider } = configureChains(
   [chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
   [publicProvider()]
 )
 
-const connectors = connectorsForWallets([
-  {
-    groupName: "Recommended",
-    wallets: [
-      wallet.injected({ chains }),
-      wallet.rainbow({ chains }),
-      wallet.walletConnect({ chains }),
-      wallet.metaMask({ chains }),
-    ],
-  },
-])
-
 const client = createClient({
   autoConnect: true,
   provider,
-  connectors,
 })
 
 // Use of the <SessionProvider> is mandatory to allow components that call
 // `useSession()` anywhere in your application to access the `session` object.
-export default function App({ Component, pageProps }: AppProps) {
+export default function App({
+  Component,
+  pageProps,
+}: AppProps<{
+  session: Session;
+}>) {
   return (
     <WagmiConfig client={client}>
-      <RainbowKitProvider chains={chains}>
-        <SessionProvider session={pageProps.session} refetchInterval={0}>
-          <Component {...pageProps} />
-        </SessionProvider>
-      </RainbowKitProvider>
+      <SessionProvider session={pageProps.session} refetchInterval={0}>
+        <Component {...pageProps} />
+      </SessionProvider>
     </WagmiConfig>
   )
-}
+}

pages/api/auth/[...nextauth].ts

@@ -69,4 +69,4 @@ export default async function auth(req: any, res: any) {
       },
     },
   })
-}
+}

pages/siwe.tsx

@@ -1,13 +1,18 @@
-import { ConnectButton } from "@rainbow-me/rainbowkit"
-import { getCsrfToken, signIn } from "next-auth/react"
+import { getCsrfToken, signIn, useSession } from "next-auth/react"
 import { SiweMessage } from "siwe"
-import { useAccount, useNetwork, useSignMessage } from "wagmi"
+import { useAccount, useConnect, useNetwork, useSignMessage } from "wagmi"
 import Layout from "../components/layout"
+import { InjectedConnector } from 'wagmi/connectors/injected'
+import { useEffect, useState } from "react"
 
 function Siwe() {
   const { signMessageAsync } = useSignMessage()
   const { chain } = useNetwork()
-  const { address } = useAccount()
+  const { address, isConnected } = useAccount()
+  const { connect } = useConnect({
+    connector: new InjectedConnector(),
+  });
+  const { data: session, status } = useSession()
 
   const handleLogin = async () => {
     try {
@@ -35,20 +40,27 @@ function Siwe() {
     }
   }
 
+  useEffect(() => {
+    console.log(isConnected);
+    if (isConnected && !session) {
+      handleLogin()
+    }
+  }, [isConnected])
+
   return (
     <Layout>
-      {address ? (
-        <button
-          onClick={(e) => {
-            e.preventDefault()
+      <button
+        onClick={(e) => {
+          e.preventDefault()
+          if (!isConnected) {
+            connect()
+          } else {
             handleLogin()
-          }}
-        >
-          Sign-in
-        </button>
-      ) : (
-        <ConnectButton />
-      )}
+          }
+        }}
+      >
+        Sign-in
+      </button>
     </Layout>
   )
 }
@@ -63,4 +75,4 @@ export async function getServerSideProps(context: any) {
 
 Siwe.Layout = Layout
 
-export default Siwe
+export default Siwe

pages/styles.css

@@ -1,36 +1,3 @@
-body {
-  font-family: -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans,
-    sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  padding: 0 1rem 1rem 1rem;
-  max-width: 680px;
-  margin: 0 auto;
-  background: #fff;
-  color: #333;
-}
-
-li,
-p {
-  line-height: 1.5rem;
-}
-
-a {
-  font-weight: 500;
-}
-
-hr {
-  border: 1px solid #ddd;
-}
-
-iframe {
-  background: #ccc;
-  border: 1px solid #ccc;
-  height: 10rem;
-  width: 100%;
-  border-radius: 0.5rem;
-  filter: invert(1);
-}
-
 button {
   margin: 0 0 0.75rem 0;
   text-decoration: none;
@@ -49,5 +16,4 @@ button {
 button:hover {
   cursor: pointer;
   box-shadow: inset 0 0 5rem rgb(0 0 0 / 20%);
-}
-
+}