feat: link github username (#22)

close #22

Author: aahna-ashina

package-lock.json

@@ -19,6 +19,7 @@
     "eslint-config-next": "13.3.0",
     "next": "13.3.0",
     "papaparse": "^5.4.1",
+    "passport-github2": "^0.1.12",
     "postcss": "8.4.21",
     "react": "18.2.0",
     "react-apexcharts": "^1.4.0",

package.json

@@ -26,10 +26,17 @@ export default function ProfileDetailsGitHub({ address }: any) {
         }
         console.info('gitHubUsername:', gitHubUsername)
         if (!gitHubUsername) {
-            return <code>Not linked</code>
+            return (
+                <>
+                    <code>Not linked</code>
+                    <Link className="ml-4 font-bold text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-green-400" href={`https://etherscan.io/address/0xb989c0c17a3bce679d7586d9e55b6eab11c18687#writeContract#F1`}>
+                        Update ↗
+                    </Link>
+                </>
+            )
         } else {
             return (
-                <Link target="_blank" className="font-bold text-transparent bg-clip-text bg-gradient-to-br from-blue-400 to-green-400" href={`https://github.com/${gitHubUsername}`}>
+                <Link target="_blank" className="font-bold text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-green-400" href={`https://github.com/${gitHubUsername}`}>
                     <code>@{gitHubUsername}</code>
                 </Link>
             )

src/components/ProfileDetailsGitHub.tsx

@@ -71,7 +71,7 @@ export default function ProfilePage({ citizen, nationCred, veNation, dework, sou
                 <ul>
                   <li className='text-ellipsis overflow-hidden'>
                     <span className='text-gray-400 '>Ethereum address</span><br />
-                    <Link target='_blank' className="font-bold text-transparent bg-clip-text bg-gradient-to-br from-blue-400 to-green-400" href={`https://etherscan.io/address/${citizen.ownerAddress}`}>
+                    <Link target='_blank' className="font-bold text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-green-400" href={`https://etherscan.io/address/${citizen.ownerAddress}`}>
                       <code>{citizen.ownerAddress}</code>
                     </Link>
                   </li>