Cowrie-Remit Frontend 🌍

Stellar Drips Wave · User Remittance Dashboard
Organization: Cowrie-Labs · Maintainer: @Alhaji-naira

---

Overview

cowrie-remit-frontend is the Next.js 14 user-facing dashboard for the Cowrie-Remit decentralized cross-border remittance protocol. Users can:

• 🔗 Connect their Freighter Stellar wallet
• 💸 Send Funds — initiate a stablecoin remittance via the Soroban settlement contract
• 📈 View Live Conversion Rates — NGN, GHS, KES, ZAR, EUR → USD
• 📋 Track Transaction History — pending, settled, and refunded transfers

---

Tech Stack

Layer	Technology
Framework	Next.js 14 (App Router)
Styling	Tailwind CSS
Wallet	Freighter (@stellar/freighter-api)
Stellar SDK	@stellar/stellar-sdk
State	Zustand
Data Fetching	SWR

---

Getting Started (UI Contributors)

Prerequisites

• Node.js ≥ 20
• npm ≥ 10
• Freighter browser extension for wallet testing

Install & Run

cd Cowrie-Remit-Frontend
npm install

# Development server
npm run dev

Open http://localhost:3000 in your browser.

Environment Variables

Create a .env.local file:

NEXT_PUBLIC_API_URL=http://localhost:4000
NEXT_PUBLIC_STELLAR_NETWORK=testnet
NEXT_PUBLIC_SETTLEMENT_CONTRACT_ID=<DEPLOYED_CONTRACT_ID>

---

Project Structure

Cowrie-Remit-Frontend/
├── package.json
├── src/
│   ├── app/
│   │   └── page.tsx          # Main dashboard (Send Funds + History + FX Rates)
│   └── lib/
│       └── freighter.ts      # Stellar Freighter wallet connection helpers

---

Key Components

src/app/page.tsx

The main remittance dashboard featuring:

• Header — wallet connect button + network indicator
• FX Rate Cards — live conversion rates for all supported corridors
• Send Funds Form — recipient address, amount, currency selector, USDC preview
• Transaction History Table — paginated, with color-coded status badges

src/lib/freighter.ts

Typed helpers for Freighter integration:

• isFreighterInstalled() — detects the extension
• connectWallet() — requests permission + returns public key
• getNetwork() — returns network details and passphrase
• signXdr(xdr, passphrase) — signs a transaction XDR
• initWallet() — full init flow returning WalletState

---

Contributing (Drips Wave)

This repository is part of the Stellar Drips Wave program.

1. Fork under Cowrie-Labs
2. Create a branch: git checkout -b feat/your-ui-feature
3. Follow the existing Tailwind design system (dark theme, amber/orange gradient accents)
4. Ensure all interactive elements have unique id attributes for testability
5. Open a PR with screenshots of your changes

Good First Issues for Drips Contributors

• Connect page.tsx to the real backend API via SWR hooks
• Build a TransactionModal component for transfer details
• Add Zustand store for global wallet + transfer state
• Implement real Soroban contract invocation in the Send Funds form
• Add responsive mobile layout optimizations
• Write Playwright E2E tests for the send flow

---

Design System

Token	Value
Background	#0a0b14
Surface	white/3 – white/5
Primary Gradient	#f5c842 → #f07c3e
Pending badge	Amber
Settled badge	Emerald
Refunded badge	Rose

---

License

MIT © Cowrie-Labs