DenBridge Console (Web)

Next.js frontend for the DenBridge Console. Provides the 3-stage flow:

1. Setup wallets (EVM + Stacks)
2. Funding (bridge USDC -> USDCx)
3. Run payroll (CSV -> batch payout on Stacks)

Routes

• / -> Landing (unchanged)
• /app -> Stage 1 Setup
• /app/funding -> Stage 2 Funding
• /app/payroll -> Stage 3 Run Payroll

Wizard variants (legacy / internal):

• /wizard/setup
• /wizard/funding
• /wizard/payroll

Environment

Set values in the repo root .env (see .env.example).

Relayer:

• SEPOLIA_RPC_URL
• EVM_CHAIN_ID
• EVM_USDC_ADDRESS
• EVM_XRESERVE_ADDRESS
• HIRO_STACKS_API_BASE
• RELAYER_PORT
• STACKS_USDCX_TOKEN_CONTRACT

Web:

• NEXT_PUBLIC_RELAYER_BASE_URL
• NEXT_PUBLIC_HIRO_STACKS_API_BASE
• NEXT_PUBLIC_EVM_CHAIN_ID
• NEXT_PUBLIC_EVM_USDC_ADDRESS
• NEXT_PUBLIC_EVM_XRESERVE_ADDRESS
• NEXT_PUBLIC_STACKS_BATCH_CONTRACT_ADDRESS
• NEXT_PUBLIC_STACKS_BATCH_CONTRACT_NAME
• NEXT_PUBLIC_STACKS_USDCX_TOKEN_CONTRACT
• NEXT_PUBLIC_STACKS_REMOTE_DOMAIN_ID
• NEXT_PUBLIC_STACKS_NETWORK

Note: defaults are applied in development for NEXT_PUBLIC_* vars, but production builds should set all values explicitly.

Development

From repo root:

pnpm i
pnpm dev

This runs devnet + web + relayer concurrently.

Services Contract

Integration hooks live in src/services/:

• BridgeService (bridge-service.ts)
• StacksTreasuryService (treasury-service.ts)
• PayrollService (payroll-service.ts)

Notes

• EVM wallet is required for Funding.
• Stacks wallet is optional for Funding (manual recipient allowed), required for Payroll.
• UI uses existing theme tokens only; do not add arbitrary hex values.
• /design is read-only reference material.