Bridge Widget

The DynamicBridgeWidget component allows you to handle multi chain bridging

See it in action on https://starkgate.starknet.io/

Background

This widget gives you a full UI to handle the Bridge use case (multi chain bridging). It will allow you to connect multiple wallets from different chains and bridge assets between them.

The video above shows our Bridge Widget in action on our demo site. Here you can see how to connect two wallets from different chains and then you can see that you can easily toggle the wallets so different wallets can sign.

For this multi-chain bridge, this flow is custom built for this scenario. It is different from our multiwallet widget, since only 1 wallet of each chain is desired. Additionally, this bridge widget supports the following:

1. It is a Connect-only multiwallet widget where all relevant information about the connected wallets are stored in Local Storage instead of the DB
2. It directs users to add a wallet from 1 chain, and then a second chain
3. It is flexible in that:
   • A user can easily add or remove wallets
   • It can toggle between the wallets so defining the Depositing wallet vs the Withdrawl wallet is simple.
   • It supports network switching.
   • It supports unlinking through our widget or via a hook
   • The event listeners work on both wallets, so your dapp is always up to date with the proper account and network.

Usage

To get the bridge component setup, you’ll want to have your desired chains configured, for example Ethereum and Starknet. Then, in your index.tsx (or wherever you render DynamicContextProvider, specify the initialAuthenticationMode and bridgeChains prop like so:

import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";
import { EthereumWalletConnectors } from "@dynamic-labs/ethereum ";
import { StarknetWalletConnectors } from "@dynamic-labs/starknet";

<DynamicContextProvider
  settings={{
    environmentId: "ENV_ID",
    initialAuthenticationMode: "connect-only",
    walletConnectors: [EthereumWalletConnectors, StarknetWalletConnectors]
    bridgeChains: [
      {
        chain: "EVM",
      },
      {
        chain: "STARK",
      },
    ],
  }}
>
  <App />
</DynamicContextProvider>

Then, in app.tsx:

import { DynamicBridgeWidget } from "@dynamic-labs/sdk-react-core";

export default function App() {
  return (
    <div className="App">
      <DynamicBridgeWidget />
    </div>
  );
}

And that’s it! Now you’re rendering our bridge widget.

bridgeChains

Primarily used for bridging purposes, this object is passed as a prop to the settings in the DynamicContextProvider component. It creates a situation where the isFullyConnected prop on useDynamicContext hook is true only if the user has connected at least one wallet per chain, from each chain in the bridgeChains array.

Description

An Array of objects, in which each object contains the chain name to be connected.

Field	Description
chain: string	Chain name

Example

[
  {
    chain: "EVM",
  },
  {
    chain: "STARK",
  },
];