Examples

This folder contains example code showing how to use the fxrp-bridge-component package in your React application.

Files

• wagmiConfig.ts - Required wagmi configuration for connecting to Flare Network
• basic-usage.tsx - Simple example using the BridgeButton component
• advanced-usage.tsx - Advanced example using BridgeModal directly for custom integration

How to Use These Examples

Option 1: Copy into Your Project

1. Copy wagmiConfig.ts to your project
2. Copy either basic-usage.tsx or advanced-usage.tsx
3. Adapt the code to your needs
4. Make sure you have the required dependencies installed

Option 2: Create a Test Project

# Create a new Vite React TypeScript project
npm create vite@latest test-bridge -- --template react-ts
cd test-bridge

# Install dependencies
npm install
npm install wagmi viem @tanstack/react-query

# Install the bridge component
npm install fxrp-bridge-component

# Run the dev server
npm run dev

Required Dependencies

Your project needs these dependencies:

{
  "dependencies": {
    "react": "^18.0.0 || ^19.0.0",
    "react-dom": "^18.0.0 || ^19.0.0",
    "wagmi": "^3.0.0",
    "viem": "^2.0.0",
    "@tanstack/react-query": "^5.0.0",
    "fxrp-bridge-component": "^1.0.0"
  }
}

Environment Setup

Make sure your backend is running on the URL you specify in apiBaseUrl:

<BridgeButton apiBaseUrl="https://api.demo.com" />

Replace with our hosted actual backend URL (e.g., https://api.demo.com).

##Make sure you have wagmni set up correctly in your project. Use the provided wagmiConfig.ts as a reference.

// Example wagmi configuration for using the bridge component
import { http, createConfig } from 'wagmi'
import { injected, walletConnect } from 'wagmi/connectors'

// Flare Coston2 Testnet configuration
export const flareTestnetCoston2 = {
  id: 114,
  name: 'Flare Testnet Coston2',
  nativeCurrency: { 
    name: 'Coston2 Flare', 
    symbol: 'C2FLR', 
    decimals: 18 
  },
  rpcUrls: {
    default: { 
      http: ['https://coston2-api.flare.network/ext/C/rpc'] 
    },
  },
  blockExplorers: {
    default: { 
      name: 'Coston2 Explorer', 
      url: 'https://coston2-explorer.flare.network' 
    },
  },
  testnet: true,
} as const

// Wagmi configuration
export const config = createConfig({
  chains: [flareTestnetCoston2],
  connectors: [
    injected(),
    // Optional: Add WalletConnect if needed
    // walletConnect({
    //   projectId: 'YOUR_WALLETCONNECT_PROJECT_ID',
    // }),
  ],
  transports: {
    [flareTestnetCoston2.id]: http(),
  },
})

declare module 'wagmi' {
  interface Register {
    config: typeof config
  }
}

Next Steps

After setting up the examples:

1. Connect your MetaMask wallet to Flare Coston2 Testnet
2. Get some test FLR tokens from the faucet
3. Click the bridge button to test the functionality
4. Customize the component styling and behavior as needed