first commit

.gitignore

@@ -6,6 +6,9 @@
 # testing
 /coverage
 
+#env
+.env
+
 # next.js
 /.next/
 /out/

package.json

@@ -26,24 +26,24 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^14.2.0",
     "@types/node": "^20.11.8",
-    "@types/react": "^18.2.48",
+    "@types/react": "18.3.10",
     "@types/react-dom": "^18.2.7",
     "@vitest/coverage-v8": "^2.0.2",
     "@vitest/ui": "^2.0.1",
     "@wagmi/cli": "latest",
     "autoprefixer": "^10.4.19",
     "bufferutil": "^4.0.7",
     "encoding": "^0.1.13",
-    "lokijs": "^1.5.12",
     "jsdom": "^24.1.0",
+    "lokijs": "^1.5.12",
     "pino-pretty": "^10.2.0",
     "postcss": "^8.4.38",
     "supports-color": "^9.4.0",
     "tailwindcss": "^3.4.0",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^14.2.0",
-    "typescript": "^5.3.3",
+    "typescript": "5.6.2",
     "utf-8-validate": "^6.0.3",
     "vitest": "^2.0.1"
   }

src/app/page.tsx

@@ -1,7 +1,6 @@
 'use client';
 import Footer from 'src/components/Footer';
-import TransactionWrapper from 'src/components/TransactionWrapper';
-import WalletWrapper from 'src/components/WalletWrapper';
+import IdentityWrapper from 'src/components/IdentityWrapper';
 import { ONCHAINKIT_LINK } from 'src/links';
 import OnchainkitSvg from 'src/svg/OnchainkitSvg';
 import { useAccount } from 'wagmi';
@@ -31,20 +30,8 @@ export default function Page() {
       </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">
         <div className="flex h-[450px] w-[450px] max-w-full items-center justify-center rounded-xl bg-[#030712]">
-          <div className="rounded-xl bg-[#F3F4F6] px-4 py-[11px]">
-            <p className="font-normal text-indigo-600 text-xl not-italic tracking-[-1.2px]">
-              npm install @coinbase/onchainkit
-            </p>
-          </div>
+          <IdentityWrapper />
         </div>
-        {address ? (
-          <TransactionWrapper address={address} />
-        ) : (
-          <WalletWrapper
-            className="w-[450px] max-w-full"
-            text="Sign in to transact"
-          />
-        )}
       </section>
       <Footer />
     </div>

src/components/IdentityWrapper.tsx

@@ -0,0 +1,40 @@
+import {
+    Avatar,
+    Name,
+    useAddress,
+    useAvatar,
+    useName,
+  } from '@coinbase/onchainkit/identity';
+  import { useEffect } from 'react';
+  import { base } from 'viem/chains';
+  import { useAccount } from 'wagmi';
+
+  export default function IdentityWrapper() {
+    const { address } = useAccount();
+
+    const { data: addressBasename } = useAddress({ address, chain: base });
+    const { data: avatarBasename } = useAvatar({ address, chain: base });
+    const { data: basename } = useName({ address, chain: base });
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+      useEffect(() => {
+      }, [
+      address,
+      addressBasename,
+      avatarBasename,
+      basename,
+    ]);
+
+    return (
+      <div className="mx-auto max-w-2xl p-4">
+        {address && (
+          <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" />
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }

src/components/WalletWrapper.tsx

@@ -21,6 +21,7 @@ type WalletWrapperParams = {
   className?: string;
   withWalletAggregator?: boolean;
 };
+
 export default function WalletWrapper({
   className,
   text,

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es2020",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "plugins": [
       {
@@ -20,6 +24,13 @@
     ],
     "baseUrl": "."
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

yarn.lock

@@ -1356,14 +1356,22 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.2.48":
+"@types/react@*":
   version "18.3.7"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.7.tgz#6decbfbb01f8d82d56ff5403394121940faa6569"
   integrity sha512-KUnDCJF5+AiZd8owLIeVHqmW9yM4sqmDVf2JRJiBMFkGvkoZ4/WyV2lL4zVsoinmRS/W3FeEdZLEWFRofnT2FQ==
   dependencies:
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/[email protected]":
+  version "18.3.10"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.10.tgz#6edc26dc22ff8c9c226d3c7bf8357b013c842219"
+  integrity sha512-02sAAlBnP39JgXwkAq3PeU9DVaaGpZyF3MGcC0MKgQVkZor5IiiDAipVaxQHtDJAmO4GIy/rVBy/LzVj76Cyqg==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/secp256k1@^4.0.6":
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/@types/secp256k1/-/secp256k1-4.0.6.tgz#d60ba2349a51c2cbc5e816dcd831a42029d376bf"
@@ -5256,7 +5264,7 @@ tslib@^2.0.0, tslib@^2.1.0, tslib@^2.3.1, tslib@^2.4.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.7.0.tgz#d9b40c5c40ab59e8738f297df3087bf1a2690c01"
   integrity sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==
 
-typescript@^5.3.3:
+typescript@5.6.2:
   version "5.6.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.6.2.tgz#d1de67b6bef77c41823f822df8f0b3bcff60a5a0"
   integrity sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==