Frontend

This frontend application facilitates bridging between Ethereum and Tezos blockchains. It interacts with smart contracts and an indexer to provide a seamless user experience for cross-chain token transfers.

Overview

The frontend application is built using Next.js and serves as an interface for users to bridge tokens between Ethereum and Tezos. It leverages smart contracts on both blockchains and an indexer to manage and verify cross-chain transactions efficiently.

Key Features

Cross-Chain Bridging: Users can transfer tokens between Ethereum and Tezos seamlessly.
Smart Contract Integration: Interacts with smart contracts on both Ethereum and Tezos to wrap, mint, and burn tokens.
Indexer Support: Utilizes an indexer to monitor and verify the status of cross-chain transactions.
Real-Time Updates: Provides real-time updates on transaction status and balance changes.
User-Friendly Interface: Designed with a focus on usability, ensuring a smooth experience for both novice and experienced users.

Deployment

Getting Started

To deploy the frontend application, follow these steps:

1. Environment Setup

Node.js (v14 or later)
npm, Yarn, pnpm, or Bun
Access to Ethereum and Tezos nodes

2. Clone the Repository

git clone https://github.com/RAIDSquare/tezos.git
cd tezos/frontend

3. Install Dependencies

npm install
# or
yarn install
# or
pnpm install
# or
bun install

4. Configure Environment Variables

Create a .env file in the root directory and set the necessary environment variables:

NEXT_PUBLIC_CONTRACT_ADDRESS_ETHEREUM=your_ethereum_contract_address
NEXT_PUBLIC_CONTRACT_ADDRESS_TEZOS=your_tezos_contract_address
NEXT_PUBLIC_CONTRACT_ADDRESS_INDEXER=your_indexer_contract_address

5. Run the Application

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Production Deployment

Push your project to a GitHub repository and import it into dedicated service/server (vercel/netlify...). Configure the environment variables and deploy.

Usage

Connecting Wallets

Users need to connect their Ethereum and Tezos wallets to the frontend to initiate cross-chain transactions. The application supports popular wallets like MetaMask for Ethereum and Temple Wallet for Tezos.

Bridging Tokens

To bridge tokens between Ethereum and Tezos, follow these steps:

1. Select Token and amount

Choose the token and the amount you wish to bridge.

2. Choose Direction

Specify whether you are bridging from Ethereum to Tezos or vice versa.

3. Initiate transaction

Confirm the transaction details and initiate the bridging process.

4. Monitor progress

Use the frontend to monitor the progress of your transaction through the indexer.

Viewing Transaction History

Users can view their transaction history and the status of their cross-chain transfers directly from the dashboard.

Troubleshooting

Common Issues

Wallet Connection Issues
- Ensure that your wallet is properly installed and configured.
- Verify that you are using the correct network (Ethereum or Tezos) in your wallet.
Transaction Failures
- Ensure that you have sufficient balance and gas fees to cover the transaction.
Indexer Synchronization Delays
- Transactions are not appearing immediately, check back later.
- Verify that the indexer is correctly configured and connected to the appropriate nodes.

Getting Help

For further assistance, refer to the project's GitHub repository or contact the support team. Provide detailed information about the issue, including any error messages and steps to reproduce the problem.

Table of Contents