Files
mpc/dashboard/components/smart-wallets/safe-tx-queue.tsx
zeekay 6b38df60a4 feat: MPC wallet dashboard - full-stack implementation
Complete MPC wallet management platform rivaling Fireblocks/Utila/Fordefi:

Backend (Go):
- REST API with 60+ endpoints on chi router (pkg/api/)
- PostgreSQL schema with 13 tables (pkg/db/)
- JWT + MFA auth, bcrypt passwords, API key management
- Policy engine (deny/approve/require_approval)
- Transaction signing flow with approval workflow
- Subscription scheduler for recurring payments
- Payment requests with public pay pages
- Safe + ERC-4337 smart wallet integration (pkg/smart/)
- Rate limiting, webhook delivery (HMAC-SHA256), audit logging
- 27 passing tests (auth, policy engine, middleware)

Frontend (Next.js 14):
- 27 routes with monochrome dark theme (Tailwind + Geist fonts)
- Full API client with JWT auto-refresh
- React Query hooks for all resources
- Pages: dashboard, vaults, wallets, transactions, policies,
  whitelist, team, settings, API keys, webhooks, audit,
  subscriptions, payments, smart wallets

Infrastructure:
- Dockerfiles for API (Go) and dashboard (Next.js standalone)
- compose.yml for local development (PostgreSQL + API + dashboard)
- K8s manifests for mpc.lux.network + cloud.lux.network
- GitHub Actions deploy workflow (build → push GHCR → kubectl apply)
- TLS via cert-manager, Traefik IngressRoute for both domains
2025-12-27 13:11:38 -08:00

103 lines
3.3 KiB
TypeScript

'use client'
interface PendingSafeTx {
id: string
to: string
value: string
data: string
nonce: number
confirmations: number
required: number
submittedBy: string
createdAt: string
}
interface SafeTxQueueProps {
transactions: PendingSafeTx[]
walletId: string
}
export function SafeTxQueue({ transactions, walletId }: SafeTxQueueProps) {
if (transactions.length === 0) {
return (
<div className="rounded-lg border border-border p-8 text-center text-sm text-muted-foreground">
No pending transactions.
</div>
)
}
async function handleConfirm(txId: string) {
// TODO: call API to confirm Safe transaction
console.log('Confirm tx', txId, 'on wallet', walletId)
}
async function handleExecute(txId: string) {
// TODO: call API to execute Safe transaction
console.log('Execute tx', txId, 'on wallet', walletId)
}
return (
<div className="space-y-3">
{transactions.map((tx) => (
<div
key={tx.id}
className="rounded-lg border border-border bg-card p-4 space-y-3"
>
<div className="flex items-center justify-between">
<span className="font-mono text-xs text-muted-foreground">
Nonce #{tx.nonce}
</span>
<span className="text-xs text-muted-foreground">
{tx.confirmations}/{tx.required} confirmations
</span>
</div>
<div className="grid grid-cols-2 gap-2 text-sm">
<div>
<p className="text-xs text-muted-foreground">To</p>
<p className="truncate font-mono text-xs">{tx.to}</p>
</div>
<div>
<p className="text-xs text-muted-foreground">Value</p>
<p className="font-mono text-xs">{tx.value}</p>
</div>
</div>
{tx.data !== '0x' && (
<div>
<p className="text-xs text-muted-foreground">Data</p>
<p className="truncate font-mono text-xs">{tx.data}</p>
</div>
)}
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">
By: {tx.submittedBy} at {new Date(tx.createdAt).toLocaleString()}
</span>
<div className="flex gap-2">
<button
onClick={() => handleConfirm(tx.id)}
className="rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent"
>
Confirm
</button>
{tx.confirmations >= tx.required && (
<button
onClick={() => handleExecute(tx.id)}
className="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90"
>
Execute
</button>
)}
</div>
</div>
{/* Progress bar */}
<div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
<div
className="h-full rounded-full bg-emerald-500 transition-all"
style={{ width: `${(tx.confirmations / tx.required) * 100}%` }}
/>
</div>
</div>
))}
</div>
)
}