add nfts

coinbase · Nov 8, 2024 · 1f1f2be · 1f1f2be
1 parent 9c151ef
commit 1f1f2be
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 23 deletions.
diff --git a/app/components/AgentAssets.tsx b/app/components/AgentAssets.tsx
@@ -1,15 +1,17 @@
 import { type Token, TokenRow } from '@coinbase/onchainkit/token';
-import { useCallback, useEffect, useState } from 'react';
-// import useGetNFTs from "../hooks/useGetNFTs";
-import type { Address } from 'viem';
-import { useToken } from 'wagmi';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import useGetNFTs from '../hooks/useGetNFTs';
+import { erc721Abi, type Address } from 'viem';
+import { useContractRead, useToken } from 'wagmi';
 import useGetTokens from '../hooks/useGetTokens';
+import { NFTMintCard } from '@coinbase/onchainkit/nft';
+import { NFTCollectionTitle } from '@coinbase/onchainkit/nft/mint';
 
-type AgentTokenProps = {
+type AgentAssetProps = {
   tokenAddress: Address;
 };
 
-function AgentToken({ tokenAddress }: AgentTokenProps) {
+function AgentToken({ tokenAddress }: AgentAssetProps) {
   const { data } = useToken({ address: tokenAddress, chainId: 84532 });
   const token: Token = {
     address: tokenAddress,
@@ -20,38 +22,63 @@ function AgentToken({ tokenAddress }: AgentTokenProps) {
     image: '',
   };
 
-  return <TokenRow token={token} className="max-w-56 rounded" />;
+  return <TokenRow token={token} className="max-w-56 rounded font-mono" />;
+}
+
+function AgentNFT({ tokenAddress }: AgentAssetProps) {
+  const { data: name } = useContractRead({
+    address: tokenAddress,
+    abi: erc721Abi,
+    functionName: 'name',
+    chainId: 84532,
+  });
+
+  const nftData = useMemo(() => {
+    return {
+      name,
+    };
+  }, [name]);
+
+  if (!name) {
+    return null;
+  }
+
+  return (
+    <NFTMintCard contractAddress={tokenAddress} useNFTData={() => nftData}>
+      <NFTCollectionTitle className="font-mono text-sm" />
+    </NFTMintCard>
+  );
 }
 export default function AgentAssets() {
   const [tab, setTab] = useState('tokens');
-  // const [nfts, setNFTs] = useState<string[]>([]);
+  const [nfts, setNFTs] = useState<Address[]>([]);
   const [tokens, setTokens] = useState<Address[]>([]);
 
   const { getTokens } = useGetTokens({ onSuccess: setTokens });
-  // const { getNFTs } = useGetNFTs({ onSuccess: setNFTs });
+  const { getNFTs } = useGetNFTs({ onSuccess: setNFTs });
 
   const handleTabChange = useCallback((tab: string) => {
     return () => setTab(tab);
   }, []);
 
   useEffect(() => {
-    // getNFTs();
+    getNFTs();
     getTokens();
-  }, [getTokens]);
+  }, [getNFTs, getTokens]);
 
   return (
     <div className="mr-2 mb-4 rounded-sm bg-black p-4">
       <div className="flex flex-col items-start gap-4">
         <div className="flex w-full grow gap-6 border-zinc-700 border-b">
-          {/* <button
+          <button
             type="button"
-            onClick={handleTabChange("nfts")}
+            onClick={handleTabChange('nfts')}
             className={`flex items-center justify-center py-1 ${
-              tab === "nfts" ? "border-b border-[#5788FA]" : ""
+              tab === 'nfts' ? 'border-b border-[#5788FA]' : ''
             }`}
           >
             NFTs
-          </button> */}
+          </button>
           <button
             type="button"
             onClick={handleTabChange('tokens')}
@@ -68,6 +95,14 @@ export default function AgentAssets() {
           tokens?.map((token) => (
             <AgentToken key={token} tokenAddress={token} />
           ))}
+
+        {tab === 'nfts' && nfts && (
+          <div className="grid grid-col-1 sm:grid-cols-2 gap-4">
+            {nfts?.map((nft) => (
+              <AgentNFT key={nft} tokenAddress={nft} />
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );

diff --git a/app/constants.ts b/app/constants.ts
@@ -3,8 +3,4 @@ export const AGENT_WALLET_ADDRESS =
 
 export const AGENT_NAME = 'Based Agent';
 
-export const DEFAULT_PROMPT =
-  'Be creative and same something interesting about the blockchain and your abilities in one sentence';
-
-// export const DEFAULT_PROMPT =
-//   'Be creative and do something interesting on the blockchain. Choose an action or set of actions and execute it in a way that highlights your abilities.';
+export const DEFAULT_PROMPT = 'summarize the latest block data on base sepolia';
diff --git a/app/hooks/useGetNFTs.ts b/app/hooks/useGetNFTs.ts
@@ -1,15 +1,16 @@
 import { useCallback, useState } from 'react';
+import type { Address } from 'viem';
 import { API_URL } from '../config';
 
 type UseGetNFTsResponse = {
-  NFTs?: string[];
+  NFTs?: Address[];
   error?: Error;
   getNFTs: () => void;
   isLoading: boolean;
 };
 
 type UseGetNFTsProps = {
-  onSuccess: (nfts: string[]) => void;
+  onSuccess: (addresses: Address[]) => void;
 };
 
 export default function useGetNFTs({

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "ci:lint": "biome ci --formatter-enabled=false --organize-imports-enabled=false"
   },
   "dependencies": {
-    "@coinbase/onchainkit": "latest",
+    "@coinbase/onchainkit": "0.35.5",
     "concurrently": "^8.0.1",
     "next": "14.2.15",
     "react": "^18",