Components

Reusable React components built with Radix UI and Tailwind CSS

Core UI

The UI system is built for a Glassmorphism aesthetic, utilizing transparency and blurs to create a premium feel.

ConnectButton

A custom wrapper around RainbowKit's connect button. It handles network switching alerts (e.g., "Wrong Network" if user is on Mainnet instead of Sepolia).

src/components/ConnectButton.tsx

DepositCard

Displays an individual deposit bucket. Shows the "Remaining" vs "Initial" amount visualizer and provides action buttons (Supply/Withdraw).

src/components/deposit/DepositCard.tsx

ActionModal

The main interaction surface. Handles form input for amounts, token selection, and shows the "Encryption/Signing" progress steps.

src/components/modals/ActionModal.tsx

HealthFactorDial

A visual guage showing the user's current health factor securely fetched from Sapphire. Color-coded (Green/Yellow/Red) based on safety.

src/components/dashboard/HealthFactorDial.tsx