[Dashboard] Integrate Freighter wallet for real on-chain transactions

[IyanuOluwaJesuloba]

Title: [Dashboard] Integrate Freighter wallet for real on-chain transactions

Summary

The dashboard currently has no wallet connection. The "Deploy to Stellar" and "Deploy Policy on Stellar" buttons exist in the UI but do nothing when clicked. This issue implements real Freighter wallet integration so users can actually register agents and create spending policies from the dashboard.

Freighter is the official Stellar browser wallet extension. Docs: https://docs.freighter.app

Current State

In dashboard/src/components/RegisterAgent.tsx, the deploy button calls showSuccess() immediately without any real transaction:

tsx

// line ~155 — this just fakes success, does nothing real
<button onClick={() => setStep("success")}>
  ⚡ DEPLOY TO STELLAR
</button>

Same issue in PolicyManager.tsx — the "Deploy Policy on Stellar" button does nothing.

What Needs to Be Built

1. Create dashboard/src/lib/wallet.ts

A wallet helper module with these functions:

ts

// Connect Freighter and return the user's public key
export async function connectWallet(): Promise<string>

// Check if Freighter is installed
export async function isFreighterInstalled(): Promise<boolean>

// Sign and submit a transaction using Freighter
export async function signAndSubmit(tx: Transaction, network: Network): Promise<string>

2. Create dashboard/src/hooks/useWallet.ts

A React hook that manages wallet connection state:

ts

export function useWallet() {
  // returns:
  // publicKey: string | null
  // isConnected: boolean
  // isConnecting: boolean
  // connect: () => Promise<void>
  // disconnect: () => void
  // error: string | null
}

3. Update the Header in dashboard/src/App.tsx

Replace the static "STELLAR TESTNET" badge with a wallet connect button:

When disconnected: show "Connect Wallet" button

When connected: show truncated public key (e.g. GDXK...A3MN) + disconnect option

4. Wire up RegisterAgent form

In dashboard/src/components/RegisterAgent.tsx:

On "DEPLOY TO STELLAR" click, call mind.registry.register(formData, keypair)

Show a loading state while the transaction is pending (with a spinner and "Submitting to Stellar..." message)

On success, show the real transaction hash returned from Stellar

On failure, show the error message clearly

5. Wire up PolicyManager form

In dashboard/src/components/PolicyManager.tsx:

On "DEPLOY POLICY ON STELLAR" click, call mind.policy.create(formData, keypair)

Same loading/success/error states as above

Relevant Files

File:

• dashboard/src/App.tsx: Add wallet connect button to header
• dashboard/src/components/RegisterAgent.tsx: Wire deploy button to real SDK call
• dashboard/src/components/PolicyManager.tsx: Wire deploy button to real SDK call
• dashboard/src/lib/wallet.ts: Create this file
• dashboard/src/hooks/useWallet.ts: Create this file
• dashboard/package.json: Add @stellar/freighter-api dependency

Installing the Freighter SDK

bash

cd dashboard
npm install @stellar/freighter-api

Acceptance Criteria

dashboard/src/lib/wallet.ts created with connectWallet, isFreighterInstalled, signAndSubmit

dashboard/src/hooks/useWallet.ts created with full state management

Header shows "Connect Wallet" button when disconnected

Header shows truncated public key when connected

Register Agent form submits a real Soroban transaction when wallet is connected

Policy Manager form submits a real Soroban transaction when wallet is connected

Loading spinner shown during transaction submission

Real transaction hash shown on success (not a fake one)

Clear error message shown if transaction fails or user rejects in Freighter

If Freighter is not installed, show a message with a link to install it

Tips

Always check isFreighterInstalled() before calling connectWallet()

Freighter's signTransaction() takes the XDR string of the transaction — use tx.toXDR() to get it

After signing, submit via SorobanRpc.Server.sendTransaction()

Test on Stellar Testnet first — use the testnet network passphrase

Estimated Effort

Large (8–16 hours)