Skip to main content

Interact with the frontend

This section walks through configuring and running the frontend for the Chromia Bridge Demo.

Prerequisites​

Before proceeding, ensure you have the following:

  • Chromia CLI
  • Node.js
  • MetaMask or a compatible wallet.
  • Chromia bridge demo repository
    If you haven’t already cloned it: 
    git clone https://bitbucket.org/chromawallet/chromia-bridge-demo.git
  • The <BRIDGE_DEMO_BRID> for the Chromia bridge component.
    • If you deployed the bridge, this is the BRID assigned during deployment.
    • If you leased a bridge, this should be provided to you.

The following steps require you to be inside the chromia-bridge-demo/bridgefrontend folder.
Make sure you're in the correct directory:

cd chromia-bridge-demo/bridgefrontend

Set up the frontend configuration file​

Copy the example .env.local into a .env file:

cp -n .env.local .env || touch .env

Edit the .env file with the required values:

VITE_BRID=<BRIDGE_DEMO_BRID>
VITE_BRIDGE_ADDRESS=<YOUR_BRIDGE_EVM_ADDRESS>
VITE_TOKEN_ADDRESS=<YOUR_TOKEN_EVM_ADDRESS>
  • <BRIDGE_DEMO_BRID>: The RID of the Chromia bridge component.
  • <YOUR_BRIDGE_EVM_ADDRESS>: The deployed EVM bridge contract.
  • <YOUR_TOKEN_EVM_ADDRESS>: The ERC20 token contract.

Install dependencies​

Run:

npm install

Start the frontend app​

Launch the development server:

npm run dev
Bridge demo frontend running

The app will be accessible at http://localhost:5173.

Import the token into MetaMask​

Before interacting with the bridge, import the test token into MetaMask (or your preferred wallet) to track balances.

  1. Open MetaMask and ensure you're on the BSC testnet.
  2. Click Import Token.
  3. Enter the token contract address: <YOUR_TOKEN_EVM_ADDRESS>.
  4. Click Next and confirm the import.

Verify your test token balance​

  • If you deployed the ALICE test token, your balance should start at 100,000 ALICE.
  • If using a different test token, check the initial minting rules for that contract.

After verifying your balance, proceed to account setup.

Bridge demo UI

Initialize FT4 account​

  1. Click Setup to create an FT4 account linked to your EVM account.
  2. If the page reloads, click Login.

Approve token spending​

info

The test ALICE token contract has 18 decimal places, meaning 3000 tokens must be entered as:

3000000000000000000000
  1. Enter the following value to approve spending 3000 tokens.
  2. Click Approve spending of 3e+21 tokens by the Bridge.
  3. Confirm in MetaMask.

Bridge tokens from EVM to Chromia​

  1. Enter the following value to bridge 3000 tokens: 
    3000000000000000000000
  2. Click Bridge 3e+21 tokens to Chromia.
  3. Confirm in MetaMask.

Set up shell environment variables for easier queries​

Instead of copy-pasting the blockchain RIDs every time, set them once before running queries:

export NODE=https://node0.testnet.chromia.com:7740
export ER=<EVENT_RECEIVER_BRID>
export BRIDGE=<BRIDGE_DEMO_BRID>
  • NODE: The URL of the Chromia node that handles transactions and queries.
  • ER: The RID of the event_receiver blockchain, which tracks token deposits and withdrawals.
  • BRIDGE: The RID of the bridge blockchain, which manages token bridging between Chromia and EVM.

Verify token transfer​

  1. Verify that 3000 tokens were deducted from your MetaMask balance.
  2. Check the latest deposits on Chromia by running: 
    chr query --api-url $NODE -brid $BRIDGE eif.hbridge.get_erc20_deposits filter=[null,null,null,null,null] page_size=null page_cursor=null
  3. Check your FT4 account balance. Use the values retrieved in the previous step to fill in your account and asset ID: 
    chr query --api-url $NODE -brid $BRIDGE ft4.get_asset_balance account_id=<YOUR_ACCOUNT_ID> asset_id=<YOUR_ASSET_ID>

Bridge tokens back to EVM​

  1. Enter the following value to bridge 1500 tokens back: 
    1500000000000000000000
  2. Click Bridge 1.5e+21 tokens to EVM and confirm with MetaMask.
  3. Check for the withdrawal event: 
    chr query --api-url $NODE -brid $BRIDGE eif.hbridge.get_erc20_withdrawals filter=[null,null,null,null,null,null,null] page_size=null page_cursor=null
  4. Click Request Withdraw from EVM and confirm with MetaMask.
  5. Click Withdraw from bridge and confirm with MetaMask.
  6. Open MetaMask and verify that 1500 tokens were restored to your balance.

You have now successfully set up and configured the Chromia Bridge Demo to transfer tokens between the EVM and Chromia networks.