From e5fbfc4cc20fbc213932fbb96df76e27be3b5ad3 Mon Sep 17 00:00:00 2001
From: Daniel Whiffing <danielwhiffing@gmail.com>
Date: Thu, 29 Aug 2024 16:02:10 -0400
Subject: [PATCH 1/3] Displays address in chat message bubble

---
 app/api/execute/route.ts         |  4 +-
 components/ChatMessageBubble.tsx | 74 +++++++++++++++++++-------------
 utils/generateToolFromABI.ts     |  2 +-
 3 files changed, 46 insertions(+), 34 deletions(-)

diff --git a/app/api/execute/route.ts b/app/api/execute/route.ts
index 5c0949b..d3327b3 100644
--- a/app/api/execute/route.ts
+++ b/app/api/execute/route.ts
@@ -24,8 +24,8 @@ export async function POST(req: NextRequest) {
 
     const { toolCall, didToken } = result.data;
 
-    // parse contractAddress from toolCall.name;  Should be in format `${contractKey}-${functionName}-${overload function index}``
-    const contractKey = parseInt(toolCall.name.split("-").at(0) as string, 10);
+    // parse contractAddress from toolCall.name;  Should be in format `${contractKey}_${functionName}_${overload function index}``
+    const contractKey = parseInt(toolCall.name.split("_").at(0) as string, 10);
     const contracts = await contractCollection.get();
     const contract = contracts.find(({ key }) => contractKey === key);
 
diff --git a/components/ChatMessageBubble.tsx b/components/ChatMessageBubble.tsx
index 9e4aa02..5e43380 100644
--- a/components/ChatMessageBubble.tsx
+++ b/components/ChatMessageBubble.tsx
@@ -9,6 +9,8 @@ import { Button } from "./ui/button";
 import { useMagic } from "./MagicProvider";
 import { Badge } from "./ui/badge";
 import { ToolArgsTable } from "./ToolArgsTable";
+import { useContracts } from "@/utils/useContracts";
+import { NETWORKS } from "@/constants";
 
 type IToolCall = {
   name: string;
@@ -106,6 +108,7 @@ export function ToolCallMessageBubble(props: { message: Message }) {
     useState<IToolCallResponse | null>(null);
   const [loading, setLoading] = useState(false);
   const { didToken } = useMagic();
+  const { contracts } = useContracts();
 
   const { colorClassName, alignmentClassName, icon } = getStyleForRole(
     props.message.role,
@@ -156,37 +159,46 @@ export function ToolCallMessageBubble(props: { message: Message }) {
   let renderContent = null;
 
   if (content.toolCall) {
-    renderContent = (
-      <>
-        <span className="mb-2">
-          Would you like me to execute: {content.toolCall?.name}
-        </span>
-        <span className="mb-2">
-          <ToolArgsTable args={content.toolCall.args} />
-        </span>
-        <div>
-          {!toolCallSuccess ? (
-            <Button
-              className="rounded-full text-xs font-semibold"
-              disabled={loading || toolCallSuccess}
-              onClick={() => {
-                onToolCall(content.toolCall);
-              }}
-            >
-              {loading ? (
-                <LoadingIcon />
-              ) : (
-                <>
-                  <Sparkles size={14} className="mr-1" /> Execute
-                </>
-              )}
-            </Button>
-          ) : (
-            <ToolCallSuccessBadge toolCallResponse={toolCallResponse} />
-          )}
-        </div>
-      </>
-    );
+    const [key, name] = content.toolCall?.name.split("_");
+    const contract = contracts.find((c) => c.key === Number(key));
+    if (contract) {
+      renderContent = (
+        <>
+          <span className="mb-2">Would you like me to execute:</span>
+          <div className="mb-2 flex gap-2 items-center">
+            <span className="">{name}</span>
+            <span className="text-xs font-mono text-muted-foreground">
+              {contract.name}: {contract.address} (
+              {NETWORKS[contract.chainId].name})
+            </span>
+          </div>
+          <span className="mb-2">
+            <ToolArgsTable args={content.toolCall.args} />
+          </span>
+          <div>
+            {!toolCallSuccess ? (
+              <Button
+                className="rounded-full text-xs font-semibold"
+                disabled={loading || toolCallSuccess}
+                onClick={() => {
+                  onToolCall(content.toolCall);
+                }}
+              >
+                {loading ? (
+                  <LoadingIcon />
+                ) : (
+                  <>
+                    <Sparkles size={14} className="mr-1" /> Execute
+                  </>
+                )}
+              </Button>
+            ) : (
+              <ToolCallSuccessBadge toolCallResponse={toolCallResponse} />
+            )}
+          </div>
+        </>
+      );
+    }
   } else {
     renderContent = <span>{content.text}</span>;
   }
diff --git a/utils/generateToolFromABI.ts b/utils/generateToolFromABI.ts
index 0a8e8d6..30d3146 100644
--- a/utils/generateToolFromABI.ts
+++ b/utils/generateToolFromABI.ts
@@ -36,7 +36,7 @@ export const generateToolFromABI =
       .join(", ");
 
     return new DynamicStructuredTool({
-      name: `${contract.key}-${func.name}-${funcOverloadIndex}`,
+      name: `${contract.key}_${func.name}_${funcOverloadIndex}`,
       description: `Description for ${contract.address} ${func.name} with ${inputLength} inputs consisting of ${inputString}`,
       schema: z.object(schema),
       func: async (args): Promise<string> => {

From 190618879df7b37a9f5c518b0396623e9282fba4 Mon Sep 17 00:00:00 2001
From: Daniel Whiffing <danielwhiffing@gmail.com>
Date: Thu, 29 Aug 2024 16:46:29 -0400
Subject: [PATCH 2/3] Adds fallback

---
 components/ChatMessageBubble.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/ChatMessageBubble.tsx b/components/ChatMessageBubble.tsx
index 5e43380..51b7d8d 100644
--- a/components/ChatMessageBubble.tsx
+++ b/components/ChatMessageBubble.tsx
@@ -165,7 +165,10 @@ export function ToolCallMessageBubble(props: { message: Message }) {
       renderContent = (
         <>
           <span className="mb-2">Would you like me to execute:</span>
-          <div className="mb-2 flex gap-2 items-center">
+          <div
+            title={content.toolCall?.name}
+            className="mb-2 flex gap-2 items-center"
+          >
             <span className="">{name}</span>
             <span className="text-xs font-mono text-muted-foreground">
               {contract.name}: {contract.address} (
@@ -198,6 +201,8 @@ export function ToolCallMessageBubble(props: { message: Message }) {
           </div>
         </>
       );
+    } else {
+      renderContent = <span>Bad tool call: {content.toolCall?.name}</span>;
     }
   } else {
     renderContent = <span>{content.text}</span>;

From 8a7828369ed5028e8fac5752af13e577b011b55f Mon Sep 17 00:00:00 2001
From: Daniel Whiffing <danielwhiffing@gmail.com>
Date: Thu, 29 Aug 2024 16:46:34 -0400
Subject: [PATCH 3/3] Adds uniswap

---
 constants/index.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/constants/index.ts b/constants/index.ts
index 5fefefe..ab7cdcd 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -20,6 +20,13 @@ export const FEATURED_CONTRACTS: IContract[] = [
     name: "TestApe",
     description: "Publicly available NFT contract for minting. Happy Path",
   },
+  {
+    key: -3,
+    address: "0x1f9840a85d5af5bf1d1762f925bdaddc4201f984",
+    chainId: 1,
+    name: "Uniswap",
+    description: "Uniswap",
+  },
   // {
   //   address: "0xa807e2a221c6daafe1b4a3ed2da5e8a53fdaf6be",
   //   chainId: 11155111,