scaffold nft

.env.example

@@ -1,6 +1,7 @@
 NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME=agent-frontend
 NEXT_PUBLIC_ONCHAINKIT_CDP_KEY=
 NEXT_PUBLIC_ONCHAINKIT_WALLET_CONFIG=smartWalletOnly
+NEXT_PUBLIC_SIMPLE_HASH_API_KEY=
 CDP_API_KEY_NAME=
 CDP_API_KEY_PRIVATE_KEY=""
 OPENAI_API_KEY=

app/components/Agent.tsx

@@ -6,6 +6,7 @@ import Chat from './Chat';
 import Footer from './Footer';
 import Navbar from './Navbar';
 import Stream from './Stream';
+import AgentAssets from './AgentAssets';
 
 export default function Agent() {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -36,6 +37,7 @@ export default function Agent() {
         >
           <AgentProfile currentLanguage={currentLanguage} />
           <AgentBalance />
+          <AgentAssets />
         </div>
 
         <div className="flex w-full lg:w-2/3">

app/components/AgentAssets.tsx

@@ -1,8 +1,23 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import useGetNfts from '../hooks/useGetNfts';
+import { NFT } from '../types';
+import { NFTCard } from '@coinbase/onchainkit/nft';
+import {
+  NFTMedia,
+  NFTOwner,
+  NFTTitle,
+} from '@coinbase/onchainkit/nft/view';
 
 // TODO: add assets
 export default function AgentAssets() {
   const [tab, setTab] = useState('tokens');
+  const [nfts, setNfts] = useState<NFT[]>([]);
+
+  const handleSuccess = useCallback((nfts: NFT[]) => {
+    setNfts(nfts);
+  }, []);
+
+  const { getNfts } = useGetNfts({ onSuccess: handleSuccess });
 
   const tokensClass = useMemo(() => {
     if (tab === 'tokens') {
@@ -29,6 +44,10 @@ export default function AgentAssets() {
     return () => setTab(tab);
   }, []);
 
+  useEffect(() => {
+    getNfts();
+  }, []);
+
   return (
     <div className="mr-2 mb-4 rounded-sm bg-black p-4">
       <div className="flex flex-col items-start gap-4">
@@ -42,7 +61,7 @@ export default function AgentAssets() {
           </button>
           <button
             type="button"
-            onClick={handleTabChange('nft')}
+            onClick={handleTabChange('nfts')}
             className={nftsClass}
           >
             NFTs
@@ -56,7 +75,26 @@ export default function AgentAssets() {
           </button>
         </div>
 
-        {tab === 'tokens' ? <div>tokens</div> : <div>nfts</div>}
+        {tab === 'nfts' && (
+          <div className="grid grid-cols-1 xl:grid-cols-2 w-full gap-4">
+            {nfts.map((nft, index) => {
+              return (
+                <NFTCard
+                  key={`${nft.contractAddress}-${index}`}
+                  contractAddress={nft.contractAddress}
+                  tokenId={nft.tokenId}
+                  useNFTData={() => nft}
+                  onError={(e) => console.log('error', e)}
+                  className='shrink'
+                >
+                  <NFTMedia className='h-[300px]'/>
+                  <NFTTitle />
+                  <NFTOwner />
+                </NFTCard>
+              );
+            })}
+          </div>
+        )}
       </div>
     </div>
   );

app/components/Footer.tsx

@@ -1,6 +1,6 @@
 export default function Footer() {
   return (
-    <div className="fixed bottom-4 left-4 z-30 text-sm text-zinc-400">
+    <div className="fixed bottom-4 left-4 z-30 text-sm text-zinc-400 bg-black">
       Powered by{' '}
       <a
         href="https://onchainkit.xyz/"

app/config.ts

@@ -0,0 +1,2 @@
+export const SIMPLE_HASH_API_KEY =
+  process.env.NEXT_PUBLIC_SIMPLE_HASH_API_KEY ?? '';

app/hooks/useGetNfts.ts

@@ -0,0 +1,59 @@
+import { useCallback, useState } from 'react';
+import { SIMPLE_HASH_API_KEY } from '../config';
+import { AGENT_WALLET_ADDRESS } from '../constants';
+import { NFT } from '../types';
+
+const URL = `https://api.simplehash.com/api/v0/nfts/owners?chains=base-sepolia&wallet_addresses=${AGENT_WALLET_ADDRESS}&limit=50`;
+
+type UseGetNftProps = {
+  onSuccess: (nfts: NFT[]) => void;
+};
+
+type RawNFt = {
+  contract_address: string;
+  token_id: string;
+};
+
+export default function useGetNfts({ onSuccess }: UseGetNftProps) {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const getNfts = useCallback(async () => {
+    setIsLoading(true);
+
+    try {
+      const response = await fetch(URL, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-API-KEY': SIMPLE_HASH_API_KEY,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`Error: ${response.status} - ${response.statusText}`);
+      }
+
+      const { nfts } = await response.json();
+
+      const parsedNfts: NFT[] = nfts?.map((nft: any) => {
+        return {
+          contractAddress: nft?.contract_address,
+          tokenId: nft?.token_id,
+          name: nft?.name || nft?.collection?.name,
+          contractType: nft?.contract?.type,
+          ownderAddress: nft?.owners?.[0]?.owner_address
+        };
+      });
+
+      onSuccess(parsedNfts);
+      return { nfts: parsedNfts, error: null };
+    } catch (error) {
+      console.error('Error posting chat:', error);
+      return { nfts: [], error: error as Error };
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  return { getNfts, isLoading };
+}

app/hooks/useNFTData.ts

@@ -0,0 +1,5 @@
+import { Address } from 'viem';
+
+export default function useNFTData(contractAddress: Address) {
+
+}

app/types.ts

@@ -1,3 +1,6 @@
+import { NFTData } from '@coinbase/onchainkit/nft';
+import { Address } from 'viem';
+
 export type Language = 'en' | 'th' | 'zh';
 
 export type StreamEntry = {
@@ -29,3 +32,8 @@ export type AgentMessage = {
   data?: string;
   event: 'agent' | 'tools' | 'completed';
 };
+
+export type NFT = NFTData & {
+  contractAddress: Address;
+  tokenId: string;
+};

package.json

@@ -16,7 +16,7 @@
     "ci:lint": "biome ci --formatter-enabled=false --organize-imports-enabled=false"
   },
   "dependencies": {
-    "@coinbase/onchainkit": "latest",
+    "@coinbase/onchainkit": "0.35.4",
     "concurrently": "^8.0.1",
     "next": "14.2.15",
     "react": "^18",