From 8d5edd783805adf942334a16d62bf4662934bd13 Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Fri, 8 Nov 2024 14:57:16 -0800
Subject: [PATCH 1/3] add nft images

---
 app/components/Agent.tsx        |  7 ----
 app/components/AgentAssets.tsx  | 19 +++++++---
 app/components/AgentBalance.tsx | 10 ++---
 app/components/AgentProfile.tsx | 12 ++++--
 app/components/Chat.tsx         |  8 +++-
 app/components/Navbar.tsx       | 67 +++++++++++++++++++++++----------
 app/components/Stream.tsx       | 10 ++++-
 app/types.ts                    |  2 +-
 8 files changed, 88 insertions(+), 47 deletions(-)

diff --git a/app/components/Agent.tsx b/app/components/Agent.tsx
index fdd5102..f9ea9f0 100644
--- a/app/components/Agent.tsx
+++ b/app/components/Agent.tsx
@@ -1,9 +1,7 @@
 import { useState } from 'react';
 import AgentAssets from './AgentAssets';
-import AgentBalance from './AgentBalance';
 import AgentProfile from './AgentProfile';
 import Chat from './Chat';
-import Footer from './Footer';
 import Navbar from './Navbar';
 import Stream from './Stream';
 
@@ -28,9 +26,7 @@ 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 />
-          <AgentBalance />
           <AgentAssets />
-          <Footer />
         </div>
 
         <div className="flex w-full lg:w-2/3">
@@ -47,9 +43,6 @@ export default function Agent() {
           <Stream className="flex w-full flex-col" />
         </div>
       </div>
-      <div className="z-20 lg:hidden">
-        <Footer />
-      </div>
     </div>
   );
 }
diff --git a/app/components/AgentAssets.tsx b/app/components/AgentAssets.tsx
index a8fbe51..bc84775 100644
--- a/app/components/AgentAssets.tsx
+++ b/app/components/AgentAssets.tsx
@@ -10,6 +10,7 @@ import useGetTokens from '../hooks/useGetTokens';
 
 type AgentAssetProps = {
   tokenAddress: Address;
+  index?: number;
 };
 
 function AgentToken({ tokenAddress }: AgentAssetProps) {
@@ -26,7 +27,7 @@ function AgentToken({ tokenAddress }: AgentAssetProps) {
   return <TokenRow token={token} className="max-w-56 rounded font-mono" />;
 }
 
-function AgentNFT({ tokenAddress }: AgentAssetProps) {
+function AgentNFT({ index = 0, tokenAddress }: AgentAssetProps) {
   const { data: name } = useContractRead({
     address: tokenAddress,
     abi: erc721Abi,
@@ -37,6 +38,7 @@ function AgentNFT({ tokenAddress }: AgentAssetProps) {
   const nftData = useMemo(() => {
     return {
       name,
+      imageUrl: `https://raw.githubusercontent.com/coinbase/onchain-agent-demo/master/app/images/${(index + 1) % 8}.png`,
     };
   }, [name]);
 
@@ -45,7 +47,11 @@ function AgentNFT({ tokenAddress }: AgentAssetProps) {
   }
 
   return (
-    <NFTMintCard contractAddress={tokenAddress} useNFTData={() => nftData}>
+    <NFTMintCard
+      className="max-w-72"
+      contractAddress={tokenAddress}
+      useNFTData={() => nftData}
+    >
       <NFTMedia />
       <NFTCollectionTitle className="font-mono text-sm" />
     </NFTMintCard>
@@ -69,9 +75,10 @@ export default function AgentAssets() {
   }, [getNFTs, getTokens]);
 
   return (
-    <div className="mr-2 mb-4 rounded-sm bg-black p-4">
+    <div className="w-full mr-2 mb-4 rounded-sm bg-black p-4 pb-10 lg:relative lg:z-0 lg:translate-x-0 border-[#5788FA]/50 border-t">
+      <h2 className="font-bold text-[#5788FA] text-xl pb-4">My creations</h2>
       <div className="flex flex-col items-start gap-4">
-        <div className="flex w-full grow gap-6 border-zinc-700 border-b">
+        <div className="flex w-full grow gap-6 border-[#5788FA]/50 border-b">
           <button
             type="button"
             onClick={handleTabChange('nfts')}
@@ -100,8 +107,8 @@ export default function AgentAssets() {
 
         {tab === 'nfts' && nfts && (
           <div className="grid-col-1 grid gap-4 sm:grid-cols-2">
-            {nfts?.map((nft) => (
-              <AgentNFT key={nft} tokenAddress={nft} />
+            {nfts?.map((nft, index) => (
+              <AgentNFT key={nft} tokenAddress={nft} index={index} />
             ))}
           </div>
         )}
diff --git a/app/components/AgentBalance.tsx b/app/components/AgentBalance.tsx
index bb3ff28..04af0e4 100644
--- a/app/components/AgentBalance.tsx
+++ b/app/components/AgentBalance.tsx
@@ -8,12 +8,10 @@ export default function AgentBalance() {
   });
 
   return (
-    <div className="rounded-sm border-zinc-700 border-t bg-black p-4 pt-8">
-      <div className="flex flex-col items-start ">
-        <span className="font-bold text-3xl text-[#5788FA]">
-          {`${Number.parseFloat(data?.formatted || '').toFixed(6)} ETH`}
-        </span>
-      </div>
+    <div className="rounded-sm border-zinc-700">
+      <span className="text-base text-[#5788FA]">
+        {`${Number.parseFloat(data?.formatted || '').toFixed(6)} ETH`}
+      </span>
     </div>
   );
 }
diff --git a/app/components/AgentProfile.tsx b/app/components/AgentProfile.tsx
index 2112aee..92f6295 100644
--- a/app/components/AgentProfile.tsx
+++ b/app/components/AgentProfile.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { AGENT_NAME, AGENT_WALLET_ADDRESS } from '../constants';
+import AgentBalance from './AgentBalance';
 
 export default function AgentProfile() {
   const [eyePosition, setEyePosition] = useState({ x: 50, y: 50 });
@@ -75,12 +76,12 @@ export default function AgentProfile() {
           </svg>
 
           <div className="flex flex-col justify-center space-y-2">
-            <h2 className="font-bold text-[#5788FA] text-xl">{AGENT_NAME}</h2>
-            <div className="group relative inline-flex items-center">
+            <div className="flex items-center justify-center gap-2">
+              <h2 className="font-bold text-[#5788FA] text-xl">{AGENT_NAME}</h2>
               <button
                 type="button"
                 onClick={copyToClipboard}
-                className="text-[#5788FA] text-sm transition-colors hover:text-[#3D7BFF]"
+                className="text-[#5788FA] text-sm transition-colors hover:text-[#3D7BFF] bg-blue-900 bg-opacity-30 p-1 rounded-sm px-2"
               >
                 {formattedAddress}
               </button>
@@ -90,11 +91,14 @@ export default function AgentProfile() {
                 </div>
               )}
             </div>
+            <div className="group relative inline-flex items-center">
+              <AgentBalance />
+            </div>
           </div>
         </div>
 
         <p className="text-[#5788FA] text-base">
-          {`I'm your onchain concierge`}
+          I observe, imagine, and create onchain.
         </p>
       </div>
     </div>
diff --git a/app/components/Chat.tsx b/app/components/Chat.tsx
index fe22932..10f02c0 100644
--- a/app/components/Chat.tsx
+++ b/app/components/Chat.tsx
@@ -21,7 +21,13 @@ export default function Chat({ className }: ChatProps) {
   const bottomRef = useRef<HTMLDivElement>(null);
 
   const handleSuccess = useCallback((messages: AgentMessage[]) => {
-    const message = messages.find((res) => res.event === 'agent');
+    let message = messages.find((res) => res.event === 'agent');
+    if (!message) {
+      message = messages.find((res) => res.event === 'tools');
+    }
+    if (!message) {
+      message = messages.find((res) => res.event === 'error');
+    }
     const streamEntry: StreamEntry = {
       timestamp: new Date(),
       content: markdownToPlainText(message?.data || ''),
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index f60b148..1d719f5 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -73,28 +73,55 @@ export default function Navbar({
         </button>
       </div>
       <div className="flex w-full justify-between p-2">
-        <div className="flex items-center space-x-2">
-          <button
-            className="mr-2 hidden md:flex lg:hidden"
-            onClick={handleMobileProfileClick}
-            type="button"
-          >
-            ☰
-          </button>
-          <div
-            className={`h-2 w-2 rounded-full transition-all duration-700 ease-in-out ${
-              isLiveDotVisible
-                ? 'bg-green-500 opacity-100'
-                : 'bg-green-500 opacity-40'
-            }
+        <div className="flex items-center gap-4">
+          <div className="flex items-center space-x-2">
+            <button
+              className="mr-2 hidden md:flex lg:hidden"
+              onClick={handleMobileProfileClick}
+              type="button"
+            >
+              ☰
+            </button>
+            <div
+              className={`h-2 w-2 rounded-full transition-all duration-700 ease-in-out ${
+                isLiveDotVisible
+                  ? 'bg-green-500 opacity-100'
+                  : 'bg-green-500 opacity-40'
+              }
         `}
-          />
-          <span className="text-xs text-zinc-50 sm:text-sm">
-            Live on Base Sepolia
-          </span>
+            />
+            <span className="text-xs text-zinc-50 sm:text-sm">
+              Live on Base Sepolia
+            </span>
+          </div>
+          <div
+            className="text-xs text-zinc-400 sm:text-sm hidden md:flex"
+            aria-live="polite"
+          >
+            {formatDateToBangkokTime(new Date())} ICT
+          </div>
         </div>
-        <div className="text-xs sm:text-sm" aria-live="polite">
-          {formatDateToBangkokTime(new Date())} ICT
+        <div className="flex  bg-black text-sm text-xs text-zinc-400 sm:text-sm ">
+          <div className="hidden sm:flex">
+            <span className="pr-1">Powered by</span>
+            <a
+              href="https://onchainkit.xyz/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-bold transition-colors hover:text-zinc-300"
+            >
+              OnchainKit
+            </a>
+            <span className="mx-2">·</span>
+          </div>
+          <a
+            href="https://github.com/coinbase/onchain-agent-demo"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="transition-colors hover:text-zinc-300"
+          >
+            Fork this template
+          </a>
         </div>
       </div>
     </div>
diff --git a/app/components/Stream.tsx b/app/components/Stream.tsx
index 1165be8..8df318c 100644
--- a/app/components/Stream.tsx
+++ b/app/components/Stream.tsx
@@ -21,7 +21,13 @@ export default function Stream({ className }: StreamProps) {
   }, []);
 
   const handleSuccess = useCallback((messages: AgentMessage[]) => {
-    const message = messages.find((res) => res.event === 'agent');
+    let message = messages.find((res) => res.event === 'agent');
+    if (!message) {
+      message = messages.find((res) => res.event === 'tools');
+    }
+    if (!message) {
+      message = messages.find((res) => res.event === 'error');
+    }
     const streamEntry: StreamEntry = {
       timestamp: new Date(),
       content: markdownToPlainText(message?.data || ''),
@@ -31,7 +37,7 @@ export default function Stream({ className }: StreamProps) {
     setStreamEntries((prev) => [...prev, streamEntry]);
     setTimeout(() => {
       setIsThinking(true);
-    }, 800);
+    }, 5000);
   }, []);
 
   const { postChat, isLoading } = useChat({
diff --git a/app/types.ts b/app/types.ts
index 0cea67d..f77230b 100644
--- a/app/types.ts
+++ b/app/types.ts
@@ -27,5 +27,5 @@ export type AnimatedData = {
 
 export type AgentMessage = {
   data?: string;
-  event: 'agent' | 'tools' | 'completed';
+  event: 'agent' | 'tools' | 'completed' | 'error';
 };

From fefe3454122c5fc364c269aadd3ca3084e32e94a Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Fri, 8 Nov 2024 14:58:29 -0800
Subject: [PATCH 2/3] fix formatting

---
 app/components/AgentAssets.tsx  | 6 +++---
 app/components/AgentBalance.tsx | 2 +-
 app/components/AgentProfile.tsx | 2 +-
 app/components/Navbar.tsx       | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/AgentAssets.tsx b/app/components/AgentAssets.tsx
index bc84775..39f97d9 100644
--- a/app/components/AgentAssets.tsx
+++ b/app/components/AgentAssets.tsx
@@ -40,7 +40,7 @@ function AgentNFT({ index = 0, tokenAddress }: AgentAssetProps) {
       name,
       imageUrl: `https://raw.githubusercontent.com/coinbase/onchain-agent-demo/master/app/images/${(index + 1) % 8}.png`,
     };
-  }, [name]);
+  }, [name, index]);
 
   if (!name) {
     return null;
@@ -75,8 +75,8 @@ export default function AgentAssets() {
   }, [getNFTs, getTokens]);
 
   return (
-    <div className="w-full mr-2 mb-4 rounded-sm bg-black p-4 pb-10 lg:relative lg:z-0 lg:translate-x-0 border-[#5788FA]/50 border-t">
-      <h2 className="font-bold text-[#5788FA] text-xl pb-4">My creations</h2>
+    <div className="mr-2 mb-4 w-full rounded-sm border-[#5788FA]/50 border-t bg-black p-4 pb-10 lg:relative lg:z-0 lg:translate-x-0">
+      <h2 className="pb-4 font-bold text-[#5788FA] text-xl">My creations</h2>
       <div className="flex flex-col items-start gap-4">
         <div className="flex w-full grow gap-6 border-[#5788FA]/50 border-b">
           <button
diff --git a/app/components/AgentBalance.tsx b/app/components/AgentBalance.tsx
index 04af0e4..14492d1 100644
--- a/app/components/AgentBalance.tsx
+++ b/app/components/AgentBalance.tsx
@@ -9,7 +9,7 @@ export default function AgentBalance() {
 
   return (
     <div className="rounded-sm border-zinc-700">
-      <span className="text-base text-[#5788FA]">
+      <span className="text-[#5788FA] text-base">
         {`${Number.parseFloat(data?.formatted || '').toFixed(6)} ETH`}
       </span>
     </div>
diff --git a/app/components/AgentProfile.tsx b/app/components/AgentProfile.tsx
index 92f6295..a8642e4 100644
--- a/app/components/AgentProfile.tsx
+++ b/app/components/AgentProfile.tsx
@@ -81,7 +81,7 @@ export default function AgentProfile() {
               <button
                 type="button"
                 onClick={copyToClipboard}
-                className="text-[#5788FA] text-sm transition-colors hover:text-[#3D7BFF] bg-blue-900 bg-opacity-30 p-1 rounded-sm px-2"
+                className="rounded-sm bg-blue-900 bg-opacity-30 p-1 px-2 text-[#5788FA] text-sm transition-colors hover:text-[#3D7BFF]"
               >
                 {formattedAddress}
               </button>
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
index 1d719f5..f572d63 100644
--- a/app/components/Navbar.tsx
+++ b/app/components/Navbar.tsx
@@ -95,13 +95,13 @@ export default function Navbar({
             </span>
           </div>
           <div
-            className="text-xs text-zinc-400 sm:text-sm hidden md:flex"
+            className="hidden text-xs text-zinc-400 sm:text-sm md:flex"
             aria-live="polite"
           >
             {formatDateToBangkokTime(new Date())} ICT
           </div>
         </div>
-        <div className="flex  bg-black text-sm text-xs text-zinc-400 sm:text-sm ">
+        <div className="flex bg-black text-sm text-xs text-zinc-400 sm:text-sm ">
           <div className="hidden sm:flex">
             <span className="pr-1">Powered by</span>
             <a

From cfbc085780e40250ef4f76b981e247b849a87132 Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissa.crane@coinbase.com>
Date: Fri, 8 Nov 2024 15:21:36 -0800
Subject: [PATCH 3/3] update stream time

---
 app/components/AgentBalance.tsx | 4 ++++
 app/components/Stream.tsx       | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/AgentBalance.tsx b/app/components/AgentBalance.tsx
index 14492d1..89f5d3a 100644
--- a/app/components/AgentBalance.tsx
+++ b/app/components/AgentBalance.tsx
@@ -7,6 +7,10 @@ export default function AgentBalance() {
     query: { refetchInterval: 5000 },
   });
 
+  if (!data) {
+    return null;
+  }
+
   return (
     <div className="rounded-sm border-zinc-700">
       <span className="text-[#5788FA] text-base">
diff --git a/app/components/Stream.tsx b/app/components/Stream.tsx
index 8df318c..271506d 100644
--- a/app/components/Stream.tsx
+++ b/app/components/Stream.tsx
@@ -37,7 +37,7 @@ export default function Stream({ className }: StreamProps) {
     setStreamEntries((prev) => [...prev, streamEntry]);
     setTimeout(() => {
       setIsThinking(true);
-    }, 5000);
+    }, 800);
   }, []);
 
   const { postChat, isLoading } = useChat({
@@ -51,7 +51,7 @@ export default function Stream({ className }: StreamProps) {
       if (!isLoading) {
         postChat(DEFAULT_PROMPT);
       }
-    }, 1500);
+    }, 6000);
 
     return () => {
       clearInterval(streamInterval);