Skip to main content

Interact with the bridge frontend app

Start the bridge frontend app:

npm run dev

Navigate to http://localhost:5173.

Bridge Demo UI

Initialize your account

Once the app is running, initialize your FT4 account:

  1. Press the Setup button to create an FT4 account based on your EVM account. This step is only required once.
  2. If the page reloads, press the Login button to log back in.

Approve token spending

Approve the app to spend tokens on your behalf by pressing the Approve spending of 3000 tokens by the Bridge button.

Bridge tokens to Chromia

To transfer funds from the EVM to the Chromia network, press the Bridge 3000 tokens to Chromia button.

Verify token transfer

After bridging the tokens, verify that the funds have been credited to your FT4 account:

  1. Set your Node, ER, and Bridge variables:

    export NODE=http://localhost:7740
    export ER=6613EA1B36823AA67D65C6104BB93A789089D0E568939FD6CBACCE6AFF1D0859
    export BRIDGE=AB889D51EECC3A063B2430084BB6EA5EC3A1EAB866AC62CAA553D8758933CADA
    • NODE: The URL of the local 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 demo_bridge blockchain responsible for managing token bridging between Chromia and EVM.
  2. Check the deposits:

    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:

    chr query --api-url $NODE -brid $BRIDGE ft4.get_asset_balance --account_id='x"5094C958B7B8C47DCCE7B5F0200AC9EEABBA140028662A2BA6178A3EB22B2927"' asset_id='x"04F9118CABA6A2E3E4390FF191B4F46130D7370BBE7E057130810F92B8CE78DE"'

Transfer funds back to EVM

Now that the funds are in your FT4 account, you can transfer them back to the EVM:

  1. Press the Bridge 1500 Tokens to EVM button.

  2. 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
  3. Press the Request Withdraw from EVM button to initiate the withdrawal.

  4. Finally, press the Withdraw from bridge button to complete the process.

You have successfully set up and configured the bridge demo app to transfer tokens between the EVM and Chromia networks.