GitHub OAuth (#22)

.env.local.sample

@@ -1,3 +1,3 @@
 GITHUB_CALLBACK_BASE_URL=http://localhost:3000
-GITHUB_CLIENT_ID=
+GITHUB_CLIENT_ID=a01fc1f8afba1c7b4be9
 GITHUB_CLIENT_SECRET=

src/components/PassportStatus.tsx

@@ -0,0 +1,51 @@
+import { useContractRead } from "wagmi"
+import LoadingIndicator from "./LoadingIndicator"
+import VotingEscrow from "../../abis/VotingEscrow.json"
+import { useIsMounted } from "@/hooks/useIsMounted"
+import Link from "next/link"
+import { formatEther } from "viem"
+
+export default function PassportStatus({ citizen }: any) {
+    console.info('PassportStatus')
+
+    const { data, isError, isLoading } = useContractRead({
+        address: '0xf7def1d2fbda6b74bee7452fdf7894da9201065d',
+        abi: VotingEscrow.abi,
+        functionName: 'balanceOf',
+        args: [ citizen.ownerAddress ]
+    })
+    console.info('data:', data)
+    console.info('isError:', isError)
+    console.info('isLoading:', isLoading)
+
+    if (!useIsMounted() || isLoading) {
+        return <LoadingIndicator />
+    } else {
+        let veNationBalance: any = null
+        if (data) {
+            veNationBalance = data
+        }
+        console.info('veNationBalance:', veNationBalance)
+        const veNationBalanceNumber: number = Number(formatEther(veNationBalance))
+        console.info('veNationBalanceNumber:', veNationBalanceNumber)
+        if (veNationBalanceNumber < 1.5) {
+            return (
+                <>
+                    Passport status:
+                    <span className="rounded-full bg-orange-100 px-2 py-1 text-xs font-semibold text-slate-700">
+                      EXPIRED ⌛
+                    </span>
+                </>
+            )
+        } else {
+            return (
+                <>
+                    Passport status:
+                    <span className="rounded-full bg-sky-100 px-2 py-1 text-xs font-semibold text-slate-700">
+                        ACTIVE 🥳
+                    </span>
+                </>
+            )
+        }
+    }
+}

src/components/ProfileDetailsGitHub.tsx

@@ -29,8 +29,7 @@ export default function ProfileDetailsGitHub({ citizen }: any) {
             return (
                 <>
                     <code>Not linked</code>
-                    <Link href={`https://etherscan.io/address/0xb989c0c17a3bce679d7586d9e55b6eab11c18687#writeContract#F1`} target="_blank" className="border rounded-full px-2 ml-8 font-bold text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-green-400">
-                    {/* <Link href={`/${citizen.passportId}/auth/github`} className="border rounded-full px-2 ml-8 font-bold text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-green-400"> */}
+                    <Link href={`/${citizen.passportId}/auth/github`} className="border rounded-full px-2 ml-8 font-bold text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-green-400">
                         Link my GitHub account 🔗
                     </Link>
                 </>

src/pages/[passportId].tsx

@@ -15,6 +15,7 @@ import VeNationLockDetails from '@/components/VeNationLockDetails'
 import ProfileDetailsGitHub from '@/components/ProfileDetailsGitHub'
 import Link from 'next/link'
 import Head from 'next/head'
+import PassportStatus from '@/components/PassportStatus'
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false })
 
 export default function ProfilePage({ citizen, nationCred, veNation, dework, sourceCred }: any) {
@@ -115,6 +116,27 @@ export default function ProfilePage({ citizen, nationCred, veNation, dework, sou
             </div>
           </div>
 
+          <div className='mt-8'>
+            <h2 className="text-2xl">🗳️ Voting Escrow</h2>
+            <div className='mt-2'>
+              {router.isFallback ? (
+                <LoadingIndicator />
+              ) : (
+                <>
+                  <VeNationLockDetails address={citizen.ownerAddress} /><br />
+                  <PassportStatus citizen={citizen} />
+                </>
+              )}
+            </div>
+            <div className='mt-2 h-64 bg-white dark:bg-slate-800 rounded-lg p-4 drop-shadow-sm'>
+              {router.isFallback ? (
+                <LoadingIndicator />
+              ) : (
+                <VotingEscrowChart veNation={veNation} />
+              )}
+            </div>
+          </div>
+
           <div className='mt-8'>
             <h2 className="text-2xl">🎗️ NationCred</h2>
             <div className='mt-2'>
@@ -169,24 +191,6 @@ export default function ProfilePage({ citizen, nationCred, veNation, dework, sou
               )}
             </div>
           </div>
-
-          <div className='mt-8'>
-            <h2 className="text-2xl">🗳️ Voting Escrow</h2>
-            <div className='mt-2'>
-              {router.isFallback ? (
-                <LoadingIndicator />
-              ) : (
-                <VeNationLockDetails address={citizen.ownerAddress} />
-              )}
-            </div>
-            <div className='mt-2 h-64 bg-white dark:bg-slate-800 rounded-lg p-4 drop-shadow-sm'>
-              {router.isFallback ? (
-                <LoadingIndicator />
-              ) : (
-                <VotingEscrowChart veNation={veNation} />
-              )}
-            </div>
-          </div>
         </div>
       </main>
     </>

src/pages/api/[passportId]/auth/github-callback.ts

@@ -0,0 +1,27 @@
+import nc from "next-connect"
+const passport = require('passport')
+
+const failurePath = `/233/auth/github` // TODO: get [passportId]
+console.info('failurePath:', failurePath)
+
+// Handle GitHub response
+const handler = nc()
+  .get(
+    passport.authenticate('github', {
+      session: false,
+      failureRedirect: failurePath
+    }),
+    (req: any, res: any) => {
+      // Successful authentication
+      console.info('Successful authentication')
+
+      // Get GitHub username
+      const username: string = req.user.username
+      console.info('username', username)
+
+      // Redirect to /[passportId]/auth/github-success
+      res.redirect(`/233/auth/github-success?username=${username}`)
+    }
+  )
+
+export default handler

src/pages/api/[passportId]/auth/github.ts

@@ -1,7 +1,12 @@
 import nc from "next-connect"
+import { useRouter } from "next/router"
 const passport = require('passport')
 const GitHubStrategy = require('passport-github2').Strategy
 
+// const router = useRouter()
+// const passportId = router.query.passportId
+// console.info('passportId:', passportId)
+
 // Configure strategy
 const callbackBaseUrl = process.env['GITHUB_CALLBACK_BASE_URL']
 console.info('callbackBaseUrl:', callbackBaseUrl)
@@ -16,19 +21,15 @@ passport.use(new GitHubStrategy(
   function(accessToken: any, refreshToken: any, profile: any, done: any) {
     console.info('accessToken:', accessToken)
     console.info('refreshToken:', refreshToken)
-    console.info('profile:', profile)
     console.info('profile.username:', profile.username)
-    console.info('done:', done)
     return done(null, profile)
   }
 ))
 
 // Redirect to GitHub authentication
 const handler = nc()
   .get(
-    passport.authenticate('github', {
-      scope: ['user:email']
-    })
+    passport.authenticate('github', {})
   )
 
 export default handler