Merge pull request #40 from coinbase/alissa.crane/nft-images

chore: update nft images
coinbase · Nov 8, 2024 · 4d65ff5 · 4d65ff5
2 parents 13df64f + cfbc085
commit 4d65ff5
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 48 deletions.
diff --git 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
@@ -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,15 +38,20 @@ 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]);
+  }, [name, index]);
 
   if (!name) {
     return null;
   }
 
   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="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-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
@@ -7,13 +7,15 @@ export default function AgentBalance() {
     query: { refetchInterval: 5000 },
   });
 
+  if (!data) {
+    return null;
+  }
+
   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-[#5788FA] text-base">
+        {`${Number.parseFloat(data?.formatted || '').toFixed(6)} ETH`}
+      </span>
     </div>
   );
 }
diff --git 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="rounded-sm bg-blue-900 bg-opacity-30 p-1 px-2 text-[#5788FA] text-sm transition-colors hover:text-[#3D7BFF]"
               >
                 {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
@@ -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
@@ -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="hidden text-xs text-zinc-400 sm:text-sm 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
@@ -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 || ''),
@@ -45,7 +51,7 @@ export default function Stream({ className }: StreamProps) {
       if (!isLoading) {
         postChat(DEFAULT_PROMPT);
       }
-    }, 1500);
+    }, 6000);
 
     return () => {
       clearInterval(streamInterval);

diff --git 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';
 };