Skip to content

README.md

Latest commit

 

History

History
113 lines (87 loc) · 3.48 KB

README.md

File metadata and controls

113 lines (87 loc) · 3.48 KB

FlowVault — Frontend

Next.js 16 dashboard for interacting with FlowVault escrow vaults on Solana.

See the root README for a full project overview and architecture diagrams.

Structure

frontend/src/
├── app/
│   ├── layout.tsx             # Root layout with providers
│   ├── page.tsx               # Landing page + connected dashboard (tabs)
│   ├── providers.tsx          # Wallet + theme + cluster providers
│   └── globals.css            # Tailwind CSS v4 imports
├── components/
│   ├── Navbar.tsx             # Header with wallet button + cluster badge
│   ├── escrow/
│   │   ├── CreateEscrow.tsx   # Form: receiver, amount, limit, window presets
│   │   ├── EscrowLookup.tsx   # Search by counterparty + seed
│   │   ├── EscrowCard.tsx     # Status display: balances, progress, countdown
│   │   ├── WithdrawPanel.tsx  # Receiver withdrawal interface
│   │   └── CancelEscrow.tsx   # Sender cancellation interface
│   └── ui/                    # shadcn/ui primitives (button, card, tabs, dialog, ...)
├── hooks/
│   ├── useFlowVaultProgram.ts # Anchor program + provider instance
│   ├── useEscrowAccount.ts    # Fetch escrow state + vault balance (polls 10s)
│   └── useCountdown.ts        # Live countdown to window expiry
├── lib/
│   ├── constants.ts           # PROGRAM_ID, CLUSTER, RPC_ENDPOINT, explorer URLs
│   ├── pdas.ts                # findEscrowStatePda(), findVaultPda()
│   ├── format.ts              # formatSol, truncateAddress, formatDuration
│   └── utils.ts               # cn() classname helper
└── idl/
    ├── flowvault.json         # Generated Anchor IDL (copied from backend build)
    └── flowvault.ts           # TypeScript IDL type

Tech Stack

Layer Technology
Framework Next.js 16 / React 19 / TypeScript
UI Components Tailwind CSS 4 + shadcn/ui + Radix UI
Wallet Solana Wallet Adapter
Animations Motion (Framer Motion)
Forms & Validation React Hook Form + Zod
Package Manager Bun

Prerequisites

Tool Version Install
Node.js 20+ nodejs.org
Bun latest bun.sh

Setup

All commands run from the frontend/ directory.

cd frontend

# Install dependencies
bun install

# Start development server (http://localhost:3000)
bun dev

Commands

# Start development server (hot reload)
bun dev

# Create a production build
bun run build

# Start production server
bun start

# Lint with ESLint
bun run lint

Environment Variables

Create frontend/.env.local:

NEXT_PUBLIC_PROGRAM_ID=5eyT6xJEG3Qen3QD59zNEdiE4vkYgJdnNtwjSQYCnbyb
NEXT_PUBLIC_CLUSTER=devnet
NEXT_PUBLIC_RPC=https://api.devnet.solana.com
Variable Description Default
NEXT_PUBLIC_PROGRAM_ID Deployed FlowVault program address 5eyT6xJEG...
NEXT_PUBLIC_CLUSTER Solana cluster (devnet, mainnet-beta, localnet) devnet
NEXT_PUBLIC_RPC Solana RPC endpoint URL https://api.devnet.solana.com

Updating the IDL

After building or deploying the backend program, copy the generated IDL:

# From the backend/ directory
cp target/idl/flowvault.json ../frontend/src/idl/

# Or use the deploy script which does this automatically
bash scripts/deploy-devnet.sh