A modern, responsive React application for the Forgeforward protocol, providing an intuitive interface for token creation, locking, and airdrop distribution.
The Sominia UI is a comprehensive web application built with React, TypeScript, and modern web technologies. It provides users with a seamless experience for interacting with the Sominia smart contracts, including token factory operations, token locking, and airdrop management.
ui/
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── ui/ # Base UI components (shadcn/ui)
│ │ ├── ConnectButton.tsx # Wallet connection component
│ │ ├── HeroSection.tsx # Landing page hero section
│ │ ├── LockCertificateModal.tsx
│ │ ├── LockDetailsModal.tsx
│ │ ├── Navbar.tsx # Navigation component
│ │ ├── TokenFactoryCard.tsx
│ │ ├── TokenManagementModal.tsx
│ │ ├── UserLockCard.tsx # User lock display
│ │ ├── UserTokenCard.tsx # User token display
│ │ └── Web3Status.tsx # Web3 connection status
│ ├── hooks/ # Custom React hooks
│ │ ├── useAirdrop.ts # Airdrop functionality
│ │ ├── useERC20Token.ts # ERC20 token interactions
│ │ ├── useLock.ts # Token locking logic
│ │ ├── useLockFactory.ts # Lock factory interactions
│ │ └── useTokenFactory.ts # Token factory interactions
│ ├── lib/ # Utility libraries
│ │ ├── constants.ts # Application constants
│ │ ├── useReadClient.ts # GraphQL read client
│ │ ├── utils.ts # General utilities
│ │ └── wagmi.ts # Wagmi configuration
│ ├── pages/ # Application pages
│ │ ├── Airdrop.tsx # Airdrop management page
│ │ ├── Home.tsx # Landing page
│ │ ├── Lock.tsx # Token locking page
│ │ ├── LockDetails.tsx # Lock details page
│ │ └── TokenFactory.tsx # Token creation page
│ ├── abis/ # Contract ABIs
│ │ ├── airdropDistributor.ts
│ │ ├── lockFactory.ts
│ │ ├── StandardToken.ts
│ │ ├── TokenFactory.json
│ │ └── TokenLock.ts
│ └── graphql/ # GraphQL configuration
│ ├── __generated__/ # Generated types and hooks
│ ├── queries.graphql # GraphQL queries
│ └── schema.graphql # GraphQL schema
├── public/ # Static assets
└── package.json # Dependencies and scripts
- Create standard ERC20 tokens
- Create fee-based tokens with configurable transfer taxes
- Token metadata management
- Real-time token creation tracking
- Lock tokens for specified time periods
- Visual lock progress tracking
- Lock certificate generation
- Project image association
- Lock management dashboard
- Batch token distribution
- Recipient list management
- Distribution progress tracking
- Gas optimization for large airdrops
- Wallet connection (MetaMask, WalletConnect, etc.)
- Real-time blockchain data
- Transaction status tracking
- Multi-chain support
- React:
^18.3.1- UI framework - TypeScript:
~5.6.2- Type safety - Vite:
^6.0.5- Build tool and dev server
- Wagmi:
^2.16.9- React hooks for Ethereum - Viem:
^2.37.3- TypeScript interface for Ethereum - RainbowKit:
^2.2.8- Wallet connection UI
- Tailwind CSS:
^4.1.13- Utility-first CSS framework - Radix UI: Various components for accessible UI primitives
- Lucide React:
^0.542.0- Icon library - shadcn/ui: Pre-built component library
- Apollo Client:
^3.14.0- GraphQL client - TanStack Query:
^5.87.1- Server state management - React Router:
^6.30.1- Client-side routing
- ESLint:
^9.17.0- Code linting - GraphQL Code Generator:
^6.0.0- Type-safe GraphQL
- Node.js (v18 or higher)
- npm or yarn package manager
- Git
# Install dependencies
npm install
# Or using yarn
yarn installCreate a .env file in the root directory:
# GraphQL endpoint
VITE_GRAPHQL_ENDPOINT=your_graphql_endpoint
# Contract addresses (if needed)
VITE_TOKEN_FACTORY_ADDRESS=your_token_factory_address
VITE_LOCK_FACTORY_ADDRESS=your_lock_factory_address
VITE_AIRDROP_DISTRIBUTOR_ADDRESS=your_airdrop_distributor_address# Start development server
npm run dev
# Or using yarn
yarn devThe application will be available at http://localhost:5173
# Build for production
npm run build
# Or using yarn
yarn build# Generate GraphQL types and hooks
npm run codegen
# Or using yarn
yarn codegennpm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production buildnpm run lint- Run ESLintnpm run codegen- Generate GraphQL types
The project uses Vite with the following plugins:
- React plugin for JSX support
- Tailwind CSS plugin for styling
- Path aliases for clean imports (
@/maps tosrc/)
Configured for multi-chain support with:
- Ethereum mainnet
- Sepolia testnet
- Somnia testnet
- Local development networks
- Apollo Client for data fetching
- Code generation for type safety
- Real-time subscriptions support
Built with a consistent design system using:
- shadcn/ui components for consistency
- Tailwind CSS for styling
- Radix UI primitives for accessibility
- Lucide React for icons
- ConnectButton: Wallet connection with multiple providers
- TokenFactoryCard: Token creation interface
- UserTokenCard: User token management
- UserLockCard: Lock status and management
- LockDetailsModal: Detailed lock information
- Airdrop: Batch distribution interface
The UI integrates with the following smart contracts:
- TokenFactory: Token creation
- LockFactory: Token locking
- AirdropDistributor: Token distribution
- TokenLock: Individual lock management
Connects to the Envio indexer for:
- Real-time blockchain data
- Historical transaction data
- User activity tracking
- Platform statistics
# Run tests (when available)
npm test
# Run linting
npm run lint- Run
npm run buildto create production build - Deploy the
dist/folder to your hosting service - Configure environment variables for production
- Vercel
- Netlify
- AWS S3 + CloudFront
- GitHub Pages
- Environment variables for sensitive data
- Secure wallet connection handling
- Input validation and sanitization
- HTTPS enforcement in production
The application is fully responsive and optimized for:
- Desktop (1920px+)
- Tablet (768px - 1919px)
- Mobile (320px - 767px)
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)