profile card

fakepixels · Oct 3, 2024 · 6ecbde6 · 6ecbde6
1 parent c069560
commit 6ecbde6
Show file tree

Hide file tree

Showing 9 changed files with 416 additions and 192 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "check": "biome check --write .",
     "ci:check": "biome ci --formatter-enabled=false --linter-enabled=false",
     "ci:format": "biome ci --linter-enabled=false --organize-imports-enabled=false",
-    "ci:lint": "biome ci --formatter-enabled=false --organize-imports-enabled=false",
+    "ci:lint": "biome ci --formatter-enabled=true --organize-imports-enabled=false",
     "dev": "NODE_OPTIONS='--inspect' next dev",
     "format": "biome format --write .",
     "lint": "biome lint --write .",
@@ -19,14 +19,16 @@
   "dependencies": {
     "@coinbase/onchainkit": "^0.32.0",
     "framer-motion": "^11.9.0",
+    "lucide": "^0.447.0",
+    "lucide-react": "^0.447.0",
     "next": "^14.2.5",
     "permissionless": "^0.1.26",
     "react": "^18",
     "react-dom": "^18",
     "siwe": "^2.3.2"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.8.0",
+    "@biomejs/biome": "1.9.3",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^14.2.0",
     "@types/node": "^20.11.8",

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -11,9 +11,9 @@ export default function Page() {
   const { address } = useAccount();
 
   return (
-    <div className="flex h-full w-96 max-w-full flex-col px-1 md:w-[1008px]">
-      <section className="mt-6 mb-6 flex w-full flex-col md:flex-row">
-        <div className="flex w-full flex-row items-center justify-between gap-2 md:gap-0">
+    <div className='flex h-full w-96 max-w-full flex-col px-1 font-sans md:w-[1008px]'>
+      <section className='mt-6 mb-6 flex w-full flex-col md:flex-row'>
+        <div className='flex w-full flex-row items-center justify-between gap-2 md:gap-0'>
           <a
             href={ONCHAINKIT_LINK}
             title="onchainkit"
@@ -28,7 +28,7 @@ export default function Page() {
           </div>
         </div>
       </section>
-      <section className="templateSection flex w-full flex-col items-center justify-center gap-4 rounded-xl bg-gray-100 px-2 py-4 md:grow">
+      <section className="templateSection flex w-full flex-col items-center justify-center gap-4 rounded-xl px-2 py-4 md:grow">
         <div className="flex h-[450px] w-[450px] max-w-full items-center justify-center rounded-xl bg-[#140431]">
           <IdentityWrapper />
         </div>

diff --git a/src/client.ts b/src/client.ts
@@ -1,8 +1,8 @@
-import { createPublicClient, http } from 'viem'
- 
-import { mainnet } from 'viem/chains'
- 
+import { http, createPublicClient } from 'viem';
+
+import { mainnet } from 'viem/chains';
+
 export const publicClient = createPublicClient({
   chain: mainnet,
-  transport: http()
-})
+  transport: http(),
+});
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -19,7 +19,7 @@ const docLinks = [
 
 export default function Footer() {
   return (
-    <section className="mt-auto mb-2 flex w-full flex-col flex-col-reverse justify-between gap-2 md:mt-8 md:mb-6 md:flex-row">
+    <section className="mt-auto mb-2 flex w-full flex-col-reverse justify-between gap-2 md:mt-8 md:mb-6 md:flex-row">
       <aside className="flex items-center pt-2 md:pt-0">
         <h3 className="mr-2 mb-2 text-m md:mb-0">
           Built with love by{' '}
@@ -42,7 +42,7 @@ export default function Footer() {
               target="_blank"
               rel="noreferrer"
               title={title}
-              className="flex items-center gap-1"
+              className="flex items-center gap-1 hover:text-indigo-600" // Added hover effect
             >
               <p>{title}</p>
               <ArrowSvg />

diff --git a/src/components/IdentityWrapper.tsx b/src/components/IdentityWrapper.tsx
@@ -1,37 +1,63 @@
-"use client";
+'use client';
 
-import {
-    Avatar,
-    Name
-  } from '@coinbase/onchainkit/identity';
+import { Avatar, Name } from '@coinbase/onchainkit/identity';
+import { getName } from '@coinbase/onchainkit/identity';
+import { Github, Globe, Twitter } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import { base } from 'viem/chains';
+import { normalize } from 'viem/ens';
 import { useAccount } from 'wagmi';
-import { normalize } from 'viem/ens'
-import { publicClient } from '../client'
-import { useEffect, useState } from 'react';
-import { getName } from '@coinbase/onchainkit/identity';
+import { publicClient } from '../client';
 
 export default function IdentityWrapper() {
   const { address } = useAccount();
-  const [ensText, setEnsText] = useState<string | null>(null);
+  const [ensText, setEnsText] = useState<{
+    twitter: string | null;
+    github: string | null;
+    url: string | null;
+  } | null>(null);
 
   useEffect(() => {
-    console.log("Address:", address); // Debug log
+    console.log('Address:', address); // Debug log
     const fetchEnsText = async () => {
       if (address) {
+        const cachedData = localStorage.getItem(address);
+        if (cachedData) {
+          setEnsText(JSON.parse(cachedData));
+          return;
+        }
+
         try {
-          const name = await getName({chain: base, address: address}); // Get the name of the address
-          console.log("Name:", name);
+          const name = await getName({ chain: base, address: address }); // Get the name of the address
+          console.log('Name:', name);
           const normalizedAddress = normalize(name as string); // Normalize the fetched name
-          console.log("Normalized Address:", normalizedAddress); 
-          const text = await publicClient.getEnsText({
+          console.log('Normalized Address:', normalizedAddress);
+          const twitterText = await publicClient.getEnsText({
             name: normalizedAddress,
-            key: 'com.twitter'
+            key: 'com.twitter',
           });
-          console.log("ENS Text Response:", text); 
-          setEnsText(text);
+          const githubText = await publicClient.getEnsText({
+            name: normalizedAddress,
+            key: 'com.github',
+          });
+          const urlText = await publicClient.getEnsText({
+            name: normalizedAddress,
+            key: 'url',
+          });
+          console.log('ENS Text Responses:', {
+            twitterText,
+            githubText,
+            urlText,
+          });
+          const fetchedData = {
+            twitter: twitterText,
+            github: githubText,
+            url: urlText,
+          };
+          setEnsText(fetchedData);
+          localStorage.setItem(address, JSON.stringify(fetchedData));
         } catch (error) {
-          console.error("Error fetching ENS text:", error); 
+          console.error('Error fetching ENS text:', error);
         }
       }
     };
@@ -44,17 +70,58 @@ export default function IdentityWrapper() {
         <div className="relative space-y-2">
           <div className="flex items-center space-x-4 rounded-full bg-white bg-opacity-20 p-2 transition-all duration-300 hover:bg-opacity-30">
             <Avatar address={address} chain={base} />
-            <Name address={address} chain={base} className="text-m text-white" />
+            <Name
+              address={address}
+              chain={base}
+              className="text-m text-white"
+            />
           </div>
           {ensText && (
-            <div className="text-white">
-              Twitter account: <a href={`https://x.com/${ensText}`} target="_blank" rel="noopener noreferrer" className="hover:underline">{ensText}</a>
+            <div className='rounded-lg bg-white bg-opacity-20 p-4 text-white shadow-md'>
+              <div className="flex items-center space-x-2">
+                <Twitter className="h-4 w-4" />
+                <span>Twitter:</span>
+                <a
+                  href={`https://x.com/${ensText.twitter}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:underline"
+                >
+                  {ensText.twitter}
+                </a>
+              </div>
+              <div className='mt-2 flex items-center space-x-2'>
+                <Github className='h-4 w-4' />
+                <span>Github:</span>
+                <a
+                  href={`https://github.com/${ensText.github}`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:underline"
+                >
+                  {ensText.github}
+                </a>
+              </div>
+              <div className='mt-2 flex items-center space-x-2'>
+                <Globe className="h-4 w-4" />
+                <span>Website:</span>
+                <a
+                  href={ensText.url ?? ''}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:underline"
+                >
+                  {ensText.url}
+                </a>
+              </div>
             </div>
           )}
         </div>
       ) : (
-        <div className="text-white">No address found</div> // Debug message
+        <div className="text-white">
+          Connect your wallet to view your profile card.
+        </div>
       )}
     </div>
   );
-}
+}
diff --git a/src/components/WalletWrapper.tsx b/src/components/WalletWrapper.tsx
@@ -47,7 +47,11 @@ export default function WalletWrapper({
             <EthBalance />
           </Identity>
           <WalletDropdownBasename />
-          <WalletDropdownLink icon="wallet" target="_blank" href="https://wallet.coinbase.com">
+          <WalletDropdownLink
+            icon="wallet"
+            target="_blank"
+            href="https://wallet.coinbase.com"
+          >
             Wallet
           </WalletDropdownLink>
           <WalletDropdownFundLink text="Fund" />

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -3,6 +3,11 @@ import type { Config } from 'tailwindcss';
 const config: Config = {
   content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
+    extend: {
+      fontFamily: {
+        sans: ['DM Sans', 'sans-serif'],
+      },
+    },
     container: {
       center: true,
       screens: {

diff --git a/yarn.lock b/yarn.lock
@@ -1119,24 +1119,24 @@
   resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@biomejs/biome@^1.8.0":
-  version "1.9.1"
-  resolved "https://registry.npmjs.org/@biomejs/biome/-/biome-1.9.1.tgz"
-  integrity sha512-Ps0Rg0zg3B1zpx+zQHMz5b0n0PBNCAaXttHEDTVrJD5YXR6Uj3T+abTDgeS3wsu4z5i2whqcE1lZxGyWH4bZYg==
+"@biomejs/biome@1.9.3":
+  version "1.9.3"
+  resolved "https://registry.npmjs.org/@biomejs/biome/-/biome-1.9.3.tgz"
+  integrity sha512-POjAPz0APAmX33WOQFGQrwLvlu7WLV4CFJMlB12b6ZSg+2q6fYu9kZwLCOA+x83zXfcPd1RpuWOKJW0GbBwLIQ==
   optionalDependencies:
-    "@biomejs/cli-darwin-arm64" "1.9.1"
-    "@biomejs/cli-darwin-x64" "1.9.1"
-    "@biomejs/cli-linux-arm64" "1.9.1"
-    "@biomejs/cli-linux-arm64-musl" "1.9.1"
-    "@biomejs/cli-linux-x64" "1.9.1"
-    "@biomejs/cli-linux-x64-musl" "1.9.1"
-    "@biomejs/cli-win32-arm64" "1.9.1"
-    "@biomejs/cli-win32-x64" "1.9.1"
-
-"@biomejs/[email protected].1":
-  version "1.9.1"
-  resolved "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-1.9.1.tgz"
-  integrity sha512-js0brHswq/BoeKgfSEUJYOjUOlML6p65Nantti+PsoQ61u9+YVGIZ7325LK7iUpDH8KVJT+Bx7K2b/6Q//W1Pw==
+    "@biomejs/cli-darwin-arm64" "1.9.3"
+    "@biomejs/cli-darwin-x64" "1.9.3"
+    "@biomejs/cli-linux-arm64" "1.9.3"
+    "@biomejs/cli-linux-arm64-musl" "1.9.3"
+    "@biomejs/cli-linux-x64" "1.9.3"
+    "@biomejs/cli-linux-x64-musl" "1.9.3"
+    "@biomejs/cli-win32-arm64" "1.9.3"
+    "@biomejs/cli-win32-x64" "1.9.3"
+
+"@biomejs/[email protected].3":
+  version "1.9.3"
+  resolved "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-1.9.3.tgz"
+  integrity sha512-QZzD2XrjJDUyIZK+aR2i5DDxCJfdwiYbUKu9GzkCUJpL78uSelAHAPy7m0GuPMVtF/Uo+OKv97W3P9nuWZangQ==
 
 "@coinbase/onchainkit@^0.32.0":
   version "0.32.0"
@@ -5881,6 +5881,16 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+lucide-react@^0.447.0:
+  version "0.447.0"
+  resolved "https://registry.npmjs.org/lucide-react/-/lucide-react-0.447.0.tgz"
+  integrity sha512-SZ//hQmvi+kDKrNepArVkYK7/jfeZ5uFNEnYmd45RKZcbGD78KLnrcNXmgeg6m+xNHFvTG+CblszXCy4n6DN4w==
+
+lucide@^0.447.0:
+  version "0.447.0"
+  resolved "https://registry.npmjs.org/lucide/-/lucide-0.447.0.tgz"
+  integrity sha512-FDF5jUaT3WjGE8OUDRLoNJ9RiG9EpQZaYk454B4AJtDbzuI1Ss3wg4LyB7kp5oW9wg7X2HmMgsiwOJUw9HCQnA==
+
 lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz"
@@ -7306,7 +7316,7 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
-react@*, "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18, "react@^18 || ^19", react@^18.0.0, react@^18.2.0, react@^18.3.1, "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16.8, react@>=18:
+react@*, "react@^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc", "react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18, "react@^18 || ^19", react@^18.0.0, react@^18.2.0, react@^18.3.1, "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16.8, react@>=18:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==