UniVail is a modern, intent-driven cross-chain bridging application built on the Avail Nexus SDK. It provides a seamless user interface for bridging assets across multiple blockchains, exploring intents, and managing multichain portfolios. Designed for speed, security, and simplicity, UniVail leverages intent-based execution to handle complex cross-chain operations with minimal friction.
- Intent-Based Bridging: Create and execute cross-chain transfers using smart intents powered by Avail Nexus.
- Unified Portfolio View: Track balances across chains without switching networks.
- Intent Explorer: Monitor, manage, and view details of your bridging intents in real-time.
- Multi-Chain Support: Compatible with major EVM chains like Ethereum, Polygon, Arbitrum, and more.
- Wallet Integration: Seamless connection via Web3Modal (AppKit) with support for MetaMask, WalletConnect, and others.
- Responsive Design: Beautiful, mobile-first UI with Tailwind CSS and Lucide icons.
- Real-Time Status Updates: Live tracking of intent fulfillment, refunds, and expirations.
- Frontend: React 18+ with TypeScript
- Build Tool: Vite for fast development and bundling
- Styling: Tailwind CSS for utility-first design
- Routing: React Router DOM
- State Management: React hooks + Wagmi for wallet management
- Blockchain Integration:
- Wagmi + AppKit for wallet connections
- @avail-project/nexus-widgets for Avail Nexus SDK
- Icons: Lucide React
- Charts/Visualization: React Flow (for potential bridge visualizations)
- Deployment: Ready for Vercel, Netlify, or custom hosting
- Node.js (v18 or higher)
- Yarn or npm
-
Clone the repository:
git clone https://github.com/0xfdbu/ethonline2025.git cd ethonline2025/frontend # Note: Navigate to the frontend folder to run the project
-
Install dependencies:
npm install # or yarn install -
Run the development server:
npm run dev # or yarn devThe app will be available at
http://localhost:5173.
npm run build
# or
yarn buildOutput will be in the dist/ folder. Serve it with any static file server.
- Displays a welcoming dashboard with quick actions to launch the bridge or explore intents.
- Connect your wallet to view portfolio insights.
- Select source tokens and chains for unified balance sourcing.
- Choose destination networks and tokens.
- Simulate and execute bridges with real-time quotes and fees.
- View all your intents in a card-based grid.
- Filter by status (Pending, Completed, Refunded, Failed).
- Click any intent to view detailed transaction summary.
- Deep dive into a specific intent with source/destination breakdowns.
- Transaction summary, expiry, and status visualization.
- Use the header connect button to link your wallet.
- Supports EVM-compatible wallets; auto-initializes Nexus SDK on connection.
- Add New Chains/Tokens: Update
src/utils/bridge/bridgeConstants.tswith new network and token configs. - Styling: Modify Tailwind config in
tailwind.config.js. - Routing: Extend routes in
src/App.tsx. - SDK Integration: Customize Nexus SDK calls in relevant hooks/pages.
Contributions are welcome! Please follow these steps:
- Fork the repository.
- Create a feature branch (
git checkout -b feature/amazing-feature). - Commit your changes (
git commit -m 'Add some amazing feature'). - Push to the branch (
git push origin feature/amazing-feature). - Open a Pull Request.
- Use ESLint and Prettier for formatting.
- Run
npm run lintbefore committing.
This project is licensed under the MIT License - see the LICENSE file for details.
- Avail Nexus for the intent-based bridging SDK.
- Wagmi and AppKit for wallet abstractions.
- Lucide React for icons.
- Avail team for the support with everything.
- Built with ❤️ for the multichain future.
UniVail: Unifying Value in Avail