Tezos-Etherlink Bridge Explorer

A web application to explore bridge transactions between Tezos and Etherlink, built with Next.js, MobX, React, and Material-UI.

Features

• Transaction List: View recent bridge transactions (deposits and withdrawals) between Tezos and Etherlink
• Transaction Details: Detailed view of individual transactions with comprehensive data sections
• Advanced Search: Search transactions by hash, Tezos address, Etherlink address, or token symbol

Getting Started

Prerequisites

• Node.js (v18 or newer recommended)
• npm, yarn, pnpm, or bun
• Modern browser with ES6+ support

Installation

1. Clone the repository:

   git clone https://github.com/your-username/tezos-etherlink-bridge-explorer.git
   cd tezos-etherlink-bridge-explorer

2. Install dependencies:

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

Running the Development Server

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

The development server uses Turbopack for faster builds and hot reloading.

Open http://localhost:3000 in your browser to view the app.

Building for Production

npm run build
npm start

Project Structure

• src/app/ – Next.js app directory (pages, layout, global styles)
  • transaction/[txHash]/ – Dynamic transaction detail pages
• src/components/ – React components
  • TransactionTable/ – Transaction list components
  • TransactionDetails/ – Transaction detail page components
  • shared/ – Reusable UI components
  • layouts/ – Layout components
• src/stores/ – MobX stores
• src/hooks/ – Custom React hooks
• src/theme/ – Material-UI theme configuration
• src/utils/ – Utility functions
• src/types/ – TypeScript type definitions
• public/ – Static assets

Environment Configuration

The application supports different networks through environment variables. Create a .env.local file in the root directory:

# GraphQL Endpoint
# Mainnet (default)
NEXT_PUBLIC_GRAPHQL_ENDPOINT=https://bridge.indexer.etherlink.com/v1/graphql

# Shadownet
# NEXT_PUBLIC_GRAPHQL_ENDPOINT=https://shadownet.bridge.indexer.etherlink.com/v1/graphql

# Etherlink Network Configuration (for wallet connections)
# Mainnet (default)
NEXT_PUBLIC_ETHERLINK_CHAIN_ID=42793
NEXT_PUBLIC_ETHERLINK_RPC_URL=https://node.mainnet.etherlink.com
NEXT_PUBLIC_ETHERLINK_NETWORK_NAME=Etherlink Mainnet
NEXT_PUBLIC_ETHERLINK_BLOCK_EXPLORER_URL=https://explorer.etherlink.com

# Shadownet
# NEXT_PUBLIC_ETHERLINK_CHAIN_ID=127823
# NEXT_PUBLIC_ETHERLINK_RPC_URL=https://node.shadownet.etherlink.com
# NEXT_PUBLIC_ETHERLINK_NETWORK_NAME=Etherlink Shadownet Testnet
# NEXT_PUBLIC_ETHERLINK_BLOCK_EXPLORER_URL=https://shadownet.explorer.etherlink.com

If no environment variables are set, the application defaults to mainnet endpoints.

Data Source

Transactions are fetched from the configured GraphQL endpoint (see Environment Configuration above).

MobX Stores

TezosTransactionStore

Main store for managing transaction data, pagination, and fetching from the GraphQL API. Handles transaction loading states and auto-refresh functionality.

TransactionDetailsStore

Store for individual transaction detail pages. Manages loading and displaying detailed information for a specific transaction.

SearchStore

Handles search functionality including input validation, filtering by withdrawal type, and building query filters for different search criteria.

Key Components

• TransactionTable: Main component for displaying the list of transactions with search and pagination
• TransactionDetails: Comprehensive transaction detail view with multiple data sections
• SearchBox: Advanced search component supporting multiple search criteria

Technology Stack

• Framework: Next.js 15 with App Router
• Build Tool: Turbopack for fast development builds
• UI Library: Material-UI (MUI) v7 with custom theming
• State Management: MobX with MobX React Lite
• Language: TypeScript
• Styling: Emotion (CSS-in-JS) with MUI
• Icons: Material-UI Icons
• Notifications: React Hot Toast