Merge pull request #33 from dwhiffing/display-address

Displays address in chat message bubble
magiclabs · Aug 29, 2024 · eb63fb5 · eb63fb5
2 parents 672f2a5 + 8a78283
commit eb63fb5
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 34 deletions.
diff --git 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
@@ -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,51 @@ 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
+            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} (
+              {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>Bad tool call: {content.toolCall?.name}</span>;
+    }
   } else {
     renderContent = <span>{content.text}</span>;
   }

diff --git 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,

diff --git 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> => {