UI for Axelar powered bridge for RMRK tokens
This application is built using a modern Web3 development stack:
- Next.js - React framework for production-grade applications
- RainbowKit - Best-in-class React library for wallet connection
- wagmi - React hooks library for Ethereum
- Viem - TypeScript interface for Ethereum interaction
- Chakra-UI - Modular and accessible component library
- Axelar - Cross-chain infrastructure for token bridging
Follow these steps to run the application locally:
- Node.js (v16 or higher)
- Yarn package manager
- Web3 wallet (MetaMask, WalletConnect, etc.) for testing
-
Clone the repository:
git clone <repository-url> cd rmrk-token-bridge-app
-
Install dependencies:
yarn install
-
Set up environment variables (if applicable):
cp .env.example .env.local # Edit .env.local with your configuration
-
Start the development server:
yarn dev
-
Open your browser: Navigate to http://localhost:3000 to see the application.
-
Connect your wallet:
- Make sure you have a Web3 wallet extension installed
- Connect your wallet through the application interface
- Ensure you have test tokens on supported networks
- Edit pages in
pages/directory - changes will auto-reload - Modify components in
components/directory - Update styles using Chakra-UI components and theming
- The application will hot-reload as you make changes
To learn more about this stack, take a look at the following resources:
- RainbowKit Documentation - Learn how to customize your wallet connection flow.
- Viem Documentation - Learn to interact with the Ethereum Blockchain and its ecosystem.
- wagmi Documentation - Learn how to create calls and react hooks for EVM with ease.
- Next.js Documentation - Learn how to build a Next.js application.
- Chakra-UI Documentation - Learn how to build UI with a modular and accessible components library based on Emotion
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out the Next.js deployment documentation for more details.