From 955edb1e714073abda03e239b791b07b80336e86 Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Fri, 8 Nov 2024 20:47:04 -0800
Subject: [PATCH] auto refetch nfts and tokens after deployment

---
 app/components/Agent.tsx       | 18 ++++++++++++++++--
 app/components/AgentAssets.tsx | 22 ++++++++++++++--------
 app/components/Chat.tsx        | 31 +++++++++++++++++++++++++++++--
 app/types.ts                   |  1 +
 4 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/app/components/Agent.tsx b/app/components/Agent.tsx
index f9ea9f0..56f55cd 100644
--- a/app/components/Agent.tsx
+++ b/app/components/Agent.tsx
@@ -1,4 +1,7 @@
 import { useState } from 'react';
+import type { Address } from 'viem';
+import useGetNFTs from '../hooks/useGetNFTs';
+import useGetTokens from '../hooks/useGetTokens';
 import AgentAssets from './AgentAssets';
 import AgentProfile from './AgentProfile';
 import Chat from './Chat';
@@ -9,6 +12,12 @@ export default function Agent() {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isMobileChatOpen, setIsMobileChatOpen] = useState(false);
 
+  const [nfts, setNFTs] = useState<Address[]>([]);
+  const [tokens, setTokens] = useState<Address[]>([]);
+
+  const { getTokens } = useGetTokens({ onSuccess: setTokens });
+  const { getNFTs } = useGetNFTs({ onSuccess: setNFTs });
+
   return (
     <div className="relative flex h-screen flex-col overflow-hidden bg-black font-mono text-[#5788FA]">
       <Navbar
@@ -26,11 +35,16 @@ export default function Agent() {
           } fixed z-20 flex h-full w-full flex-col overflow-y-auto bg-black transition-transform duration-300 lg:relative lg:z-0 lg:w-1/3 lg:translate-x-0 lg:border-[#5788FA]/50 lg:border-r `}
         >
           <AgentProfile />
-          <AgentAssets />
+          <AgentAssets
+            getTokens={getTokens}
+            getNFTs={getNFTs}
+            tokens={tokens}
+            nfts={nfts}
+          />
         </div>
 
         <div className="flex w-full lg:w-2/3">
-          <Chat />
+          <Chat getTokens={getTokens} getNFTs={getNFTs} />
           <Stream className="hidden" />
         </div>
 
diff --git a/app/components/AgentAssets.tsx b/app/components/AgentAssets.tsx
index 39f97d9..d001cbb 100644
--- a/app/components/AgentAssets.tsx
+++ b/app/components/AgentAssets.tsx
@@ -5,8 +5,6 @@ import { type Token, TokenRow } from '@coinbase/onchainkit/token';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { type Address, erc721Abi } from 'viem';
 import { useContractRead, useToken } from 'wagmi';
-import useGetNFTs from '../hooks/useGetNFTs';
-import useGetTokens from '../hooks/useGetTokens';
 
 type AgentAssetProps = {
   tokenAddress: Address;
@@ -57,13 +55,21 @@ function AgentNFT({ index = 0, tokenAddress }: AgentAssetProps) {
     </NFTMintCard>
   );
 }
-export default function AgentAssets() {
-  const [tab, setTab] = useState('tokens');
-  const [nfts, setNFTs] = useState<Address[]>([]);
-  const [tokens, setTokens] = useState<Address[]>([]);
 
-  const { getTokens } = useGetTokens({ onSuccess: setTokens });
-  const { getNFTs } = useGetNFTs({ onSuccess: setNFTs });
+type AgentAssetsProps = {
+  getTokens: () => void;
+  getNFTs: () => void;
+  nfts: Address[];
+  tokens: Address[];
+};
+
+export default function AgentAssets({
+  getTokens,
+  getNFTs,
+  tokens,
+  nfts,
+}: AgentAssetsProps) {
+  const [tab, setTab] = useState('tokens');
 
   const handleTabChange = useCallback((tab: string) => {
     return () => setTab(tab);
diff --git a/app/components/Chat.tsx b/app/components/Chat.tsx
index 10f02c0..32b5877 100644
--- a/app/components/Chat.tsx
+++ b/app/components/Chat.tsx
@@ -7,20 +7,47 @@ import ChatInput from './ChatInput';
 import StreamItem from './StreamItem';
 
 type ChatProps = {
-  enableLiveStream?: boolean;
   className?: string;
+  getNFTs: () => void;
+  getTokens: () => void;
 };
 
-export default function Chat({ className }: ChatProps) {
+export default function Chat({ className, getNFTs, getTokens }: ChatProps) {
   const [userInput, setUserInput] = useState('');
   const [streamEntries, setStreamEntries] = useState<StreamEntry[]>([]);
   const conversationId = useMemo(() => {
     return generateUUID();
   }, []);
 
+  const [shouldRefetchNFTs, setShouldRefetchNFTs] = useState(false);
+  const [shouldRefetchTokens, setShouldRefetchTokens] = useState(false);
+
+  useEffect(() => {
+    if (shouldRefetchNFTs) {
+      getNFTs();
+      setShouldRefetchNFTs(false);
+    }
+  }, [getNFTs, shouldRefetchNFTs]);
+
+  useEffect(() => {
+    if (shouldRefetchTokens) {
+      getTokens();
+      setShouldRefetchTokens(false);
+    }
+  }, [getTokens, shouldRefetchTokens]);
+
   const bottomRef = useRef<HTMLDivElement>(null);
 
   const handleSuccess = useCallback((messages: AgentMessage[]) => {
+    const functions =
+      messages?.find((msg) => msg.event === 'tools')?.functions || [];
+    if (functions?.includes('deploy_nft')) {
+      setShouldRefetchNFTs(true);
+    }
+    if (functions?.includes('deploy_token')) {
+      setShouldRefetchTokens(true);
+    }
+
     let message = messages.find((res) => res.event === 'agent');
     if (!message) {
       message = messages.find((res) => res.event === 'tools');
diff --git a/app/types.ts b/app/types.ts
index f77230b..73f0d54 100644
--- a/app/types.ts
+++ b/app/types.ts
@@ -28,4 +28,5 @@ export type AnimatedData = {
 export type AgentMessage = {
   data?: string;
   event: 'agent' | 'tools' | 'completed' | 'error';
+  functions?: string[];
 };