A modern DeFi interface built with Next.js, Tailwind CSS, Shadcn UI, Zustand, Framer Motion, and bun as package manager.
- Setup Eslint and Prettier rules
- Setup shadcn/ui theming
- Setup theme switcher
- Rework the homepage to be more dynamic and modern
- Create layout components (navbar, footer, sidebar, etc)
- Implement Nautilus Wallet connector
- Implement ErgoPay Connector
- Implement Ergo Gluon SDK
- Rework the dashboard with real protocol data
- Handle wallet logic for testnet / mainnet
- Handle Gluon information based on SDK availability
- Implement real-time protocol metrics and wallet integration
- Add responsive design across all dashboard components
- Add transaction history and detailed analytics
- Performance optimization and caching strategies (maybe websockets to confirm transactions)
Install bun, if you don't have it already, you can find it here.
If you don't want to use bun, you can always use NPM or PNPM.
- Install dependencies:
bun install- Start the development server:
bun devTo install new shadcn components:
bun x shadcn@latest add <component-name>or with NPM / PNPM:
npx shadcn@latest add <component-name>While working with shadcn, all components are installed to src/lib/components/ui You will have access to the core component file, which means you can edit the whole component as you please.
⚠️ Note: Avoid reinstalling existing components when prompted, as this will reset any custom styling in the component files.
The project follows a modular approach. Components or functions that will be used multiple times should be designed to accept various props or be moved to separate files.
src/
├── lib/
│ ├── components/ # All React components
│ │ ├── ui/ # Shadcn UI components
│ │ ├── blocks/ # Page-specific sections (dashboard, home)
│ │ ├── layout/ # Layout components (navbar, sidebar, SEO)
│ │ ├── blockchain/ # Wallet and protocol integrations
│ │ └── icons/ # Custom icon components
│ ├── constants/ # Application constants and addresses
│ ├── functions/ # Business logic and protocol functions
│ ├── hooks/ # Custom React hooks
│ ├── providers/ # Context providers (Ergo, theme)
│ ├── services/ # External service integrations
│ ├── stores/ # State management (Zustand)
│ ├── types/ # TypeScript type definitions
│ └── utils/ # Utility functions and helpers
├── pages/ # Next.js pages and API routes
└── styles/ # Global styles and CSS
- UI Components: All shadcn-related components go in
lib/components/ui - Page Sections: Add page-specific sections (e.g., dashboard stats) in
components/blocks - Layout Components: Place layout elements (navbar, sidebar, footer) in
components/layout - Blockchain Components: Wallet connectors and protocol interactions in
components/blockchain - New Features: Create dedicated folders in appropriate locations
The application integrates with the Gluon Gold SDK for protocol interactions:
- Protocol Data: Real-time price feeds, volume metrics, and reserve ratios
- Wallet Integration: Balance fetching and transaction handling via ErgoProvider
- Network Support: Automatic testnet/mainnet detection and configuration
const gluon = new sdk.Gluon()
gluon.config.NETWORK = process.env.NEXT_PUBLIC_DEPLOYMENT || 'testnet'
const gluonBox = await gluon.getGluonBox()
const oracleBox = await gluon.getGoldOracleBox()- Real-time Data: Protocol metrics update every 5 minutes, ERG price every 30 minutes
- Responsive Design: Mobile-first approach with proper breakpoints
- Motion Design: Framer Motion for smooth animations and transitions
- Theming: Full dark/light mode support with shadcn theming
- Decimals: Meaningful precision for small numbers (GAU/GAUC show 6 decimals)
- Large Numbers: Smart formatting (K/M/B notation)
- Loading States: Skeleton loaders for all data fetching
- Error Handling: Graceful fallbacks with user feedback
| Type | Convention | Example |
|---|---|---|
| Small UI Components | kebab-case | my-new-component.tsx → export as YourComponent |
| Complex Components | PascalCase | ThisComponentName.tsx |
| Single Functions | camelCase | useThisFunction.ts, getThisValue.ts |
| Multiple Functions / Utils | kebab-case | error-handler.ts, node-service.ts |
| Constants | UPPERCASE | LIKE_THIS.ts |
mainnet- Production branchtestnet- Development/testing branchdevelop- Feature integration branch
- Create feature branches from
develop:yourname/feature-name - Submit PR to
testnetwith detailed description - After testing on testnet deployment, it will be merged to
mainnet - Feature branches may be deleted after merging to mainnet
Environment variables are used for network detection. Code should be compatible with both testnet and mainnet:
// Network configuration
gluon.config.NETWORK = process.env.NEXT_PUBLIC_DEPLOYMENT || 'testnet'
// Environment-specific logic
if (process.env.NEXT_PUBLIC_DEPLOYMENT === 'testnet') {
// testnet-specific code
// wallet checkers, explorer URLs, etc.
}- Type everything possible to improve code quality
- Avoid unnecessary interfaces
- Keep type definitions simple and practical for day-to-day reading
- Add types to
src/lib/typesto keep the codebase clean and organized
- Props Design: Create reusable components with flexible props
- Error Boundaries: Implement proper error handling in components
- Loading States: Always provide loading feedback for async operations
- Accessibility: Include proper ARIA labels and keyboard navigation
- Data Polling: Use appropriate intervals (avoid overwhelming the network)
- Error Recovery: Implement retry logic for failed API calls
- Cache Strategy: Cache protocol data when appropriate
- Real Data: Always prefer real protocol data over mocked values
- Bundle Size: Monitor component bundle impact
- Re-renders: Use React.memo and useMemo appropriately
- Animation: Keep animations smooth and purposeful
- Responsive Images: Optimize images for different screen sizes
- Follow established conventions
- Respect team members' work
- Share and discuss implementation ideas
- Test thoroughly on both testnet and mainnet
- Maintain a clean and organized codebase
For questions or discussions, please join our Discord community.