Skip to main content

Interact with the frontend

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

Prerequisites​

Before proceeding, ensure you have the following:

If you haven't cloned the repository yet, run:

git clone https://bitbucket.org/chromawallet/chromia-bridge-demo.git

To obtain 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, you should have received this information.

The following steps require you to be inside the chromia-bridge-demo/bridgefrontend folder.

Ensure you are in the correct directory:

cd chromia-bridge-demo/bridgefrontend

Set up the frontend configuration file​

Create a .env file:

cp .env.example .env

Next, 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 address.
  • <YOUR_TOKEN_EVM_ADDRESS>: The ERC20 token contract address.

Install dependencies​

Run the following command to install the necessary dependencies:

npm install

Start the frontend app​

Launch the development server with the command:

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, you must import the test token into MetaMask (or your preferred wallet) to track your balances.

  1. Open MetaMask and ensure you are on the BSC Testnet.
  2. Click on 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 you are using a different test token, check the initial minting rules for that contract.

After verifying your balance, you can 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 value needed to approve spending 3000 tokens.
  2. Click Approve spending of 3e+21 tokens by the Bridge.
  3. Confirm the action in MetaMask.

Bridge tokens from EVM to Chromia​

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

Set up shell environment variables for easier queries​

To avoid copy-pasting the blockchain RIDs each 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. Ensure that 3000 tokens have been 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 from the previous step to complete the following command: 
    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. To bridge 1500 tokens back, enter the following value: 
    1500000000000000000000
  2. Click Bridge 1.5e+21 tokens to EVM and confirm the action in MetaMask.
  3. Check for the withdrawal event by running: 
    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 the transaction in MetaMask.
  5. Click Withdraw from bridge and confirm with MetaMask.
  6. Open MetaMask and verify that 1500 tokens have been 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.