feat: wire wallet transaction signing in chat UI

rz1989s · rz1989s · commit dd2ab644cbbe · 2026-04-01T23:08:21.000+07:00
diff --git a/app/src/components/ChatContainer.tsx b/app/src/components/ChatContainer.tsx
@@ -3,6 +3,7 @@ import { useWallet } from '@solana/wallet-adapter-react'
 import TextMessage from './TextMessage'
 import ConfirmationPrompt, { type ConfirmationData, type ConfirmationStatus } from './ConfirmationPrompt'
 import QuickActions from './QuickActions'
+import { useTransactionSigner, type SignStatus } from '../hooks/useTransactionSigner'
 
 interface ChatMessage {
   id: string
@@ -33,6 +34,7 @@ const API_URL = '/api/chat'
 
 export default function ChatContainer() {
   const { connected, publicKey } = useWallet()
+  const { signAndBroadcast } = useTransactionSigner()
   const [messages, setMessages] = useState<Message[]>([])
   const [input, setInput] = useState('')
   const [loading, setLoading] = useState(false)
@@ -56,6 +58,17 @@ export default function ChatContainer() {
     setMessages(prev => [...prev, msg])
   }, [])
 
+  const updateConfirmation = useCallback((confirmId: string, patch: Partial<ConfirmationData>) => {
+    setMessages(prev =>
+      prev.map(msg => {
+        if (isConfirmation(msg) && msg.data.id === confirmId) {
+          return { ...msg, data: { ...msg.data, ...patch } }
+        }
+        return msg
+      })
+    )
+  }, [])
+
   const sendToAgent = useCallback(async (userText: string) => {
     // Build conversation history for the API
     const chatHistory = messages
@@ -92,15 +105,17 @@ export default function ChatContainer() {
 
       // If the response includes a confirmation request, render it
       if (data.confirmation) {
+        const confirmId = generateId()
         addMessage({
           id: generateId(),
           type: 'confirmation',
           data: {
-            id: generateId(),
+            id: confirmId,
             action: data.confirmation.action ?? 'Transaction',
             amount: data.confirmation.amount,
             fee: data.confirmation.fee,
             recipient: data.confirmation.recipient,
+            serializedTx: data.confirmation.serializedTx,
             status: 'pending',
           },
           timestamp: new Date(),
@@ -147,32 +162,51 @@ export default function ChatContainer() {
   }
 
   const handleConfirm = (id: string) => {
-    setMessages(prev =>
-      prev.map(msg => {
-        if (isConfirmation(msg) && msg.data.id === id) {
-          return { ...msg, data: { ...msg.data, status: 'confirmed' as ConfirmationStatus } }
-        }
-        return msg
-      })
-    )
-    // In a real implementation, this would trigger wallet signing via useWallet
+    updateConfirmation(id, { status: 'confirmed' as ConfirmationStatus })
     addMessage({
       id: generateId(),
       role: 'agent',
-      content: 'Transaction confirmed. Waiting for wallet signature...',
+      content: 'Transaction confirmed (no on-chain transaction for this action).',
       timestamp: new Date(),
     })
   }
 
-  const handleCancel = (id: string) => {
-    setMessages(prev =>
-      prev.map(msg => {
-        if (isConfirmation(msg) && msg.data.id === id) {
-          return { ...msg, data: { ...msg.data, status: 'cancelled' as ConfirmationStatus } }
-        }
-        return msg
+  const handleSign = useCallback(async (confirmId: string, serializedTx: string) => {
+    updateConfirmation(confirmId, { signStatus: 'signing' as SignStatus })
+
+    const result = await signAndBroadcast(serializedTx)
+
+    if (result.signature) {
+      updateConfirmation(confirmId, {
+        status: 'confirmed',
+        signStatus: 'confirmed',
+        signature: result.signature,
       })
-    )
+      addMessage({
+        id: generateId(),
+        role: 'agent',
+        content: `Transaction confirmed: ${result.signature}`,
+        timestamp: new Date(),
+      })
+    } else {
+      updateConfirmation(confirmId, {
+        signStatus: 'error',
+        txError: result.error ?? 'Transaction failed',
+      })
+      addMessage({
+        id: generateId(),
+        role: 'agent',
+        content: `Transaction failed: ${result.error}`,
+        timestamp: new Date(),
+        error: true,
+      })
+    }
+
+    return result
+  }, [signAndBroadcast, updateConfirmation, addMessage])
+
+  const handleCancel = (id: string) => {
+    updateConfirmation(id, { status: 'cancelled' as ConfirmationStatus })
     addMessage({
       id: generateId(),
       role: 'agent',
@@ -205,6 +239,7 @@ export default function ChatContainer() {
                   data={msg.data}
                   onConfirm={handleConfirm}
                   onCancel={handleCancel}
+                  onSign={handleSign}
                 />
               ) : (
                 <TextMessage
diff --git a/app/src/components/ConfirmationPrompt.tsx b/app/src/components/ConfirmationPrompt.tsx
@@ -1,3 +1,5 @@
+import type { SignResult, SignStatus } from '../hooks/useTransactionSigner'
+
 export type ConfirmationStatus = 'pending' | 'confirmed' | 'cancelled'
 
 export interface ConfirmationData {
@@ -6,29 +8,57 @@ export interface ConfirmationData {
   amount?: string
   fee?: string
   recipient?: string
+  serializedTx?: string
   status: ConfirmationStatus
+  signature?: string
+  txError?: string
+  signStatus?: SignStatus
 }
 
 interface ConfirmationPromptProps {
   data: ConfirmationData
   onConfirm: (id: string) => void
   onCancel: (id: string) => void
+  onSign?: (id: string, serializedTx: string) => Promise<SignResult>
 }
 
 function truncateAddress(addr: string): string {
   if (addr.length <= 12) return addr
   return `${addr.slice(0, 6)}...${addr.slice(-4)}`
 }
 
-export default function ConfirmationPrompt({ data, onConfirm, onCancel }: ConfirmationPromptProps) {
+function truncateSignature(sig: string): string {
+  if (sig.length <= 16) return sig
+  return `${sig.slice(0, 8)}...${sig.slice(-4)}`
+}
+
+function explorerUrl(signature: string): string {
+  return `https://solscan.io/tx/${signature}?cluster=devnet`
+}
+
+export default function ConfirmationPrompt({ data, onConfirm, onCancel, onSign }: ConfirmationPromptProps) {
   const isPending = data.status === 'pending'
+  const isSigning = data.signStatus === 'signing' || data.signStatus === 'broadcasting'
+
+  const handleConfirm = () => {
+    if (data.serializedTx && onSign) {
+      onSign(data.id, data.serializedTx)
+    } else {
+      onConfirm(data.id)
+    }
+  }
+
+  const statusIcon = isPending
+    ? '\u26a0'
+    : data.status === 'confirmed'
+      ? '\u2713'
+      : '\u2715'
 
   return (
     <div className="confirmation">
       <div className="confirmation__card">
         <div className="confirmation__header">
-          {isPending ? '\u26a0' : data.status === 'confirmed' ? '\u2713' : '\u2715'}
-          {' '}{data.action}
+          {statusIcon}{' '}{data.action}
         </div>
 
         <div className="confirmation__body">
@@ -58,20 +88,50 @@ export default function ConfirmationPrompt({ data, onConfirm, onCancel }: Confir
           <div className="confirmation__actions">
             <button
               className="confirmation__btn confirmation__btn--confirm"
-              onClick={() => onConfirm(data.id)}
+              onClick={handleConfirm}
+              disabled={isSigning}
             >
-              Confirm & Sign
+              {data.signStatus === 'signing'
+                ? 'Signing...'
+                : data.signStatus === 'broadcasting'
+                  ? 'Broadcasting...'
+                  : 'Confirm & Sign'}
             </button>
             <button
               className="confirmation__btn confirmation__btn--cancel"
               onClick={() => onCancel(data.id)}
+              disabled={isSigning}
             >
               Cancel
             </button>
           </div>
         ) : (
-          <div className={`confirmation__status confirmation__status--${data.status}`}>
-            {data.status === 'confirmed' ? 'Transaction signed' : 'Cancelled'}
+          <div className="confirmation__footer">
+            {data.status === 'confirmed' && data.signature ? (
+              <div className="confirmation__status confirmation__status--confirmed">
+                {'\u2713'} Confirmed:{' '}
+                <a
+                  href={explorerUrl(data.signature)}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="confirmation__sig-link"
+                >
+                  {truncateSignature(data.signature)}
+                </a>
+              </div>
+            ) : data.status === 'confirmed' ? (
+              <div className="confirmation__status confirmation__status--confirmed">
+                Transaction signed
+              </div>
+            ) : data.txError ? (
+              <div className="confirmation__status confirmation__status--error">
+                {data.txError}
+              </div>
+            ) : (
+              <div className="confirmation__status confirmation__status--cancelled">
+                Cancelled
+              </div>
+            )}
           </div>
         )}
       </div>
diff --git a/app/src/hooks/useTransactionSigner.ts b/app/src/hooks/useTransactionSigner.ts
@@ -0,0 +1,82 @@
+import { useConnection, useWallet } from '@solana/wallet-adapter-react'
+import { Transaction, VersionedTransaction } from '@solana/web3.js'
+import { useCallback, useState } from 'react'
+
+export type SignStatus = 'idle' | 'signing' | 'broadcasting' | 'confirmed' | 'error'
+
+export interface SignResult {
+  signature?: string
+  error?: string
+}
+
+function deserializeTransaction(bytes: Uint8Array): Transaction | VersionedTransaction {
+  try {
+    return Transaction.from(bytes)
+  } catch {
+    return VersionedTransaction.deserialize(bytes)
+  }
+}
+
+function base64ToBytes(base64: string): Uint8Array {
+  const binary = atob(base64)
+  const bytes = new Uint8Array(binary.length)
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i)
+  }
+  return bytes
+}
+
+export function useTransactionSigner() {
+  const { connection } = useConnection()
+  const { signTransaction, publicKey } = useWallet()
+  const [status, setStatus] = useState<SignStatus>('idle')
+
+  const signAndBroadcast = useCallback(async (serializedTx: string): Promise<SignResult> => {
+    if (!signTransaction || !publicKey) {
+      setStatus('error')
+      return { error: 'Wallet not connected' }
+    }
+
+    try {
+      setStatus('signing')
+
+      const bytes = base64ToBytes(serializedTx)
+      const tx = deserializeTransaction(bytes)
+
+      const { blockhash, lastValidBlockHeight } = await connection.getLatestBlockhash('confirmed')
+
+      if (tx instanceof Transaction) {
+        tx.recentBlockhash = blockhash
+        tx.feePayer = publicKey
+      } else {
+        // VersionedTransaction: update blockhash in the message
+        tx.message.recentBlockhash = blockhash
+      }
+
+      const signed = await signTransaction(tx)
+
+      setStatus('broadcasting')
+
+      const signature = await connection.sendRawTransaction(signed.serialize(), {
+        skipPreflight: true,
+        maxRetries: 3,
+      })
+
+      await connection.confirmTransaction(
+        { signature, blockhash, lastValidBlockHeight },
+        'confirmed',
+      )
+
+      setStatus('confirmed')
+      return { signature }
+    } catch (err) {
+      setStatus('error')
+      const message = err instanceof Error ? err.message : String(err)
+      return { error: message }
+    }
+  }, [connection, signTransaction, publicKey])
+
+  const reset = useCallback(() => setStatus('idle'), [])
+
+  return { signAndBroadcast, status, setStatus, reset }
+}
diff --git a/app/src/styles/theme.css b/app/src/styles/theme.css
@@ -474,6 +474,26 @@ body {
   color: var(--text-muted);
 }
 
+.confirmation__status--error {
+  color: var(--red);
+  word-break: break-word;
+}
+
+.confirmation__footer {
+  border-top: 1px solid var(--border);
+}
+
+.confirmation__sig-link {
+  color: var(--cyan);
+  text-decoration: none;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 12px;
+}
+
+.confirmation__sig-link:hover {
+  text-decoration: underline;
+}
+
 /* Quick Actions */
 .quick-actions {
   display: flex;
