[NEB-69] Nebula: Add UI for Swap and Approve transactions (#6898)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on refactoring transaction handling in the `Nebula` application, improving message types, and enhancing UI components for transaction approval and execution.

### Detailed summary
- Updated `TransactionButton` spacing from `gap-3` to `gap-2`.
- Changed message types from `"send_transaction"` to `"action"` with a `subtype`.
- Removed `InvalidTxData` story.
- Introduced `NebulaSwapData` type for better structure.
- Added `ApproveTransactionCard` and `SwapTransactionCard` components.
- Enhanced error handling in transaction processing.
- Updated `ExecuteTransactionCard` to use `useTxSetup` for transaction status management.
- Improved UI components for displaying transaction status and hashes.
- Refined `Chats` component to render messages based on new action types.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/app/nebula-app/(app)/api/chat.ts

@@ -9,6 +9,38 @@ export type NebulaContext = {
   networks: "mainnet" | "testnet" | "all" | null;
 };
 
+export type NebulaSwapData = {
+  action: string;
+  transaction: {
+    chainId: number;
+    to: `0x${string}`;
+    data: `0x${string}`;
+  };
+  to: {
+    address: `0x${string}`;
+    amount: string;
+    chain_id: number;
+    decimals: number;
+    symbol: string;
+  };
+  from: {
+    address: `0x${string}`;
+    amount: string;
+    chain_id: number;
+    decimals: number;
+    symbol: string;
+  };
+  intent: {
+    amount: string;
+    destinationChainId: number;
+    destinationTokenAddress: `0x${string}`;
+    originChainId: number;
+    originTokenAddress: `0x${string}`;
+    receiver: `0x${string}`;
+    sender: `0x${string}`;
+  };
+};
+
 export async function promptNebula(params: {
   message: string;
   sessionId: string;
@@ -71,26 +103,29 @@ export async function promptNebula(params: {
         const data = JSON.parse(event.data);
 
         if (data.type === "sign_transaction") {
-          let txData = null;
-
           try {
-            const parsedTxData = JSON.parse(data.data);
-            if (
-              parsedTxData !== null &&
-              typeof parsedTxData === "object" &&
-              parsedTxData.chainId
-            ) {
-              txData = parsedTxData;
-            }
+            const parsedTxData = JSON.parse(data.data) as NebulaTxData;
+            params.handleStream({
+              event: "action",
+              type: "sign_transaction",
+              data: parsedTxData,
+            });
           } catch (e) {
-            console.error("failed to parse action data", e);
+            console.error("failed to parse action data", e, { event });
           }
+        }
 
-          params.handleStream({
-            event: "action",
-            type: "sign_transaction",
-            data: txData,
-          });
+        if (data.type === "sign_swap") {
+          try {
+            const swapData = JSON.parse(data.data) as NebulaSwapData;
+            params.handleStream({
+              event: "action",
+              type: "sign_swap",
+              data: swapData,
+            });
+          } catch (e) {
+            console.error("failed to parse action data", e, { event });
+          }
         }
 
         break;
@@ -160,9 +195,14 @@ type ChatStreamedResponse =
     }
   | {
       event: "action";
-      type: "sign_transaction" & (string & {});
+      type: "sign_transaction";
       data: NebulaTxData;
     }
+  | {
+      event: "action";
+      type: "sign_swap";
+      data: NebulaSwapData;
+    }
   | {
       event: "context";
       data: {
@@ -187,7 +227,7 @@ type ChatStreamedEvent =
     }
   | {
       event: "action";
-      type: "sign_transaction" & (string & {});
+      type: "sign_transaction" | "sign_swap";
       data: string;
     }
   | {

apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx

@@ -60,19 +60,21 @@ export function ChatPageContent(props: {
 
             if (content.type === "sign_transaction") {
               const txData = JSON.parse(content.data);
-              if (
-                typeof txData === "object" &&
-                txData !== null &&
-                txData.chainId
-              ) {
-                _messages.push({
-                  type: "send_transaction",
-                  data: txData,
-                });
-              }
+              _messages.push({
+                type: "action",
+                subtype: "sign_transaction",
+                data: txData,
+              });
+            } else if (content.type === "sign_swap") {
+              const swapData = JSON.parse(content.data);
+              _messages.push({
+                type: "action",
+                subtype: "sign_swap",
+                data: swapData,
+              });
             }
-          } catch {
-            // ignore
+          } catch (e) {
+            console.error("error processing message", e, { message });
           }
         } else {
           _messages.push({
@@ -548,13 +550,25 @@ export async function handleNebulaPrompt(params: {
       }
 
       if (res.event === "action") {
+        hasReceivedResponse = true;
         if (res.type === "sign_transaction") {
-          hasReceivedResponse = true;
           setMessages((prevMessages) => {
             return [
               ...prevMessages,
               {
-                type: "send_transaction",
+                type: "action",
+                subtype: res.type,
+                data: res.data,
+              },
+            ];
+          });
+        } else if (res.type === "sign_swap") {
+          setMessages((prevMessages) => {
+            return [
+              ...prevMessages,
+              {
+                type: "action",
+                subtype: res.type,
                 data: res.data,
               },
             ];

apps/dashboard/src/app/nebula-app/(app)/components/Chats.stories.tsx

@@ -57,7 +57,8 @@ export const SendTransaction: Story = {
         request_id: undefined,
       },
       {
-        type: "send_transaction",
+        type: "action",
+        subtype: "sign_transaction",
         data: {
           chainId: 1,
           to: "0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37",
@@ -69,22 +70,6 @@ export const SendTransaction: Story = {
   },
 };
 
-export const InvalidTxData: Story = {
-  args: {
-    messages: [
-      {
-        text: randomLorem(40),
-        type: "assistant",
-        request_id: undefined,
-      },
-      {
-        type: "send_transaction",
-        data: null,
-      },
-    ],
-  },
-};
-
 export const WithAndWithoutRequestId: Story = {
   args: {
     messages: [

apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx

@@ -1,6 +1,5 @@
 import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Alert, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { useMutation } from "@tanstack/react-query";
@@ -15,16 +14,18 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
+import type { NebulaSwapData } from "../api/chat";
 import { submitFeedback } from "../api/feedback";
 import { NebulaIcon } from "../icons/NebulaIcon";
 import { ExecuteTransactionCard } from "./ExecuteTransactionCard";
 import { Reasoning } from "./Reasoning/Reasoning";
+import { ApproveTransactionCard, SwapTransactionCard } from "./Swap/SwapCards";
 
 export type NebulaTxData = {
   chainId: number;
   data: `0x${string}`;
   to: string;
-  value: string;
+  value?: string;
 };
 
 export type ChatMessage =
@@ -43,8 +44,14 @@ export type ChatMessage =
       type: "assistant";
     }
   | {
-      type: "send_transaction";
-      data: NebulaTxData | null;
+      type: "action";
+      subtype: "sign_transaction";
+      data: NebulaTxData;
+    }
+  | {
+      type: "action";
+      subtype: "sign_swap";
+      data: NebulaSwapData;
     };
 
 export function Chats(props: {
@@ -161,32 +168,12 @@ export function Chats(props: {
                       {/* Right Message */}
                       <div className="min-w-0 grow">
                         <ScrollShadow className="rounded-lg">
-                          {message.type === "assistant" ? (
-                            <StyledMarkdownRenderer
-                              text={message.text}
-                              isMessagePending={isMessagePending}
-                              type="assistant"
-                            />
-                          ) : message.type === "error" ? (
-                            <div className="rounded-xl border bg-card px-4 py-2 text-destructive-text leading-normal">
-                              {message.text}
-                            </div>
-                          ) : message.type === "send_transaction" ? (
-                            <ExecuteTransactionCardWithFallback
-                              txData={message.data}
-                              client={props.client}
-                              onTxSettled={(txHash) => {
-                                props.sendMessage(
-                                  getTransactionSettledPrompt(txHash),
-                                );
-                              }}
-                            />
-                          ) : message.type === "presence" ? (
-                            <Reasoning
-                              isPending={isMessagePending}
-                              texts={message.texts}
-                            />
-                          ) : null}
+                          <RenderMessage
+                            message={message}
+                            isMessagePending={isMessagePending}
+                            client={props.client}
+                            sendMessage={props.sendMessage}
+                          />
                         </ScrollShadow>
 
                         {message.type === "assistant" &&
@@ -215,36 +202,77 @@ export function Chats(props: {
   );
 }
 
+function RenderMessage(props: {
+  message: ChatMessage;
+  isMessagePending: boolean;
+  client: ThirdwebClient;
+  sendMessage: (message: string) => void;
+}) {
+  const { message, isMessagePending, client, sendMessage } = props;
+
+  switch (message.type) {
+    case "assistant":
+      return (
+        <StyledMarkdownRenderer
+          text={message.text}
+          isMessagePending={isMessagePending}
+          type="assistant"
+        />
+      );
+
+    case "presence":
+      return <Reasoning isPending={isMessagePending} texts={message.texts} />;
+
+    case "error":
+      return (
+        <div className="rounded-xl border bg-card px-4 py-2 text-destructive-text leading-normal">
+          {message.text}
+        </div>
+      );
+
+    case "action": {
+      if (message.subtype === "sign_transaction") {
+        return (
+          <ExecuteTransactionCard
+            txData={message.data}
+            client={client}
+            onTxSettled={(txHash) => {
+              sendMessage(getTransactionSettledPrompt(txHash));
+            }}
+          />
+        );
+      }
+
+      if (message.subtype === "sign_swap") {
+        if (message.data.action === "approval") {
+          return (
+            <ApproveTransactionCard swapData={message.data} client={client} />
+          );
+        }
+
+        return (
+          <SwapTransactionCard
+            swapData={message.data}
+            client={client}
+            onTxSettled={() => {
+              // no op
+            }}
+          />
+        );
+      }
+    }
+  }
+
+  return null;
+}
+
 function getTransactionSettledPrompt(txHash: string) {
   return `\
 I've executed the following transaction successfully with hash: ${txHash}.
 
 If our conversation calls for it, continue on to the next transaction or suggest next steps`;
 }
 
-function ExecuteTransactionCardWithFallback(props: {
-  txData: NebulaTxData | null;
-  client: ThirdwebClient;
-  onTxSettled: (txHash: string) => void;
-}) {
-  if (!props.txData) {
-    return (
-      <Alert variant="destructive">
-        <AlertCircleIcon className="size-5" />
-        <AlertTitle>Failed to parse transaction data</AlertTitle>
-      </Alert>
-    );
-  }
-
-  return (
-    <ExecuteTransactionCard
-      txData={props.txData}
-      client={props.client}
-      onTxSettled={props.onTxSettled}
-    />
-  );
-}
-
 function MessageActions(props: {
   authToken: string;
   requestId: string;