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
([]);
+ const [tokens, setTokens] = useState([]);
+
+ const { getTokens } = useGetTokens({ onSuccess: setTokens });
+ const { getNFTs } = useGetNFTs({ onSuccess: setNFTs });
+
return (
-
+
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) {
);
}
-export default function AgentAssets() {
- const [tab, setTab] = useState('tokens');
- const [nfts, setNFTs] = useState([]);
- const [tokens, setTokens] = useState([]);
- 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([]);
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(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[];
};