Loan Router Demo

A Next.js app demonstrating how to interact with the Loan Router smart contract — quoting repayments, executing on-chain repays, and computing amortizing payment schedules.

Getting Started

1. Copy .env.example to .env.local and fill in your RPC URLs:

   NEXT_PUBLIC_RPC_URL_ARBITRUM=https://...
   NEXT_PUBLIC_RPC_URL_SEPOLIA=https://...
   

2. Install dependencies and start the dev server:

   pnpm install
   pnpm dev

3. Open http://localhost:3000, connect a wallet, and select a loan.

Project Structure

src/
├── app/                          Next.js pages & routing
│   ├── actions/loans.ts          Server action: fetch loans from API
│   ├── header.tsx                Top bar with connect wallet button
│   ├── layout.tsx                Root layout
│   ├── page.tsx                  Home: loans table → payment schedule
│   └── providers.tsx             Wagmi + RainbowKit + Web3 providers
├── components/                   UI components
│   ├── loans-table.tsx           Clickable loans table
│   ├── payment-schedule.tsx      Quote, repay flow, schedule table
│   └── web3-provider.tsx         Web3 context (wClient, walletAddress)
├── hooks/
│   └── use-loans.ts              React Query hook for fetching loans
├── loan-router/                  Loan Router contract code
│   ├── abi.ts                    Contract ABIs (quote, repay, approve)
│   ├── addresses.ts              Deployed addresses per chain
│   ├── payment-schedule.ts       Amortizing repayment schedule calc
│   └── types.ts                  Loan types, Zod schemas, ABI converter
├── lib/                          General utilities
│   ├── chains.ts                 getChainById (Arbitrum / Sepolia)
│   └── format.ts                 Token / status / duration formatters
└── wagmi.ts                      Wagmi + RainbowKit config

What the Demo Covers

• Fetch Loans — Retrieves a wallet's active loans from the GPU Loans API via a server action (src/app/actions/loans.ts).
• Quote — Reads the Loan Router quote function to preview the principal, interest, and fee for the next repayment.
• Repay — Approves the ERC-20 spend and calls repay on the Loan Router in a two-step transaction flow.
• Payment Schedule — Computes a full amortizing schedule from on-chain loan parameters (works for both un-initialized and active loans).

Key Files

• src/loan-router/ — All contract interaction code lives here: ABIs, deployed addresses, types, and the payment schedule calculator.
• src/components/payment-schedule.tsx — The main UI component that ties quoting, repaying, and the schedule table together.