A revolutionary stablecoin platform that rewards users on every transfer with real-world asset-backed yields. This is the frontend application for the RYVYN Protocol.
- Real World Assets: Treasury backed by 60% US T-Bills and 25% Corporate Bonds, turning idle money into working capital
- Profitable Payments: Gamified investment with deterministic rewards on every transaction, split between sender and receiver
- Stream Bonds (ryBOND): Sustainable yield that streams over time, claim your yield as it drips every second
- ryUSD Stablecoin: Mint and transfer the protocol's native stablecoin
- Treasury Dashboard: Real-time visibility into asset allocation and yields
- Transaction History: Complete transaction log with rewards tracking
| Category | Technologies |
|---|---|
| Framework | Next.js 15 with App Router & Turbopack |
| Language | TypeScript |
| Styling | Tailwind CSS 4.0 |
| Web3 Auth | Privy |
| Blockchain | Wagmi, Viem |
| Animations | Motion (Framer Motion) |
| 3D Graphics | Three.js, OGL |
| Charts | Recharts |
| UI Components | Radix UI, Lucide React |
src/
├── abis/ # Smart contract ABIs
├── app/ # Next.js App Router pages
│ ├── admin/ # Admin dashboard
│ ├── mint/ # Mint ryUSD page
│ ├── stream-bonds/ # Stream Bonds (ryBOND) page
│ ├── transactions/ # Transaction history
│ ├── transfer/ # Transfer ryUSD page
│ └── treasury/ # Treasury overview
├── components/ # Reusable UI components
├── config/ # App configuration
├── features/ # Feature-specific components
│ ├── admin/ # Admin features
│ ├── landing-page/ # Landing page sections
│ ├── mint/ # Mint functionality
│ ├── reward/ # Reward system
│ ├── transactions/ # Transaction features
│ ├── transfer/ # Transfer functionality
│ └── treasury/ # Treasury features
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── providers/ # React context providers
└── types/ # TypeScript type definitions
- Node.js 18+
- pnpm (recommended)
# Install dependencies
pnpm install
# Run the development server
pnpm devOpen http://localhost:3000 with your browser to see the result.
# Build for production
pnpm build
# Start production server
pnpm start
# Run linting
pnpm lint
# Check TypeScript types
pnpm check-typesThe UI features a modern, premium aesthetic:
- Dark theme with vibrant color accents
- Glassmorphism effects
- Smooth scroll-based animations
- Interactive 3D elements
- Responsive design
This frontend integrates with the following smart contracts:
- ryUSD: The protocol's native stablecoin
- ryBOND: Stream Bond token for yield distribution
- Treasury: Manages real-world asset allocations
- RewardDistributor: Calculates and distributes transaction rewards
MIT