Chainhop UI-Widget

UI Widget offers a convenient approach to embed the Chainhop components into your website.

The communication between your host website and the iframe widget via the window message. Once the widget identifies the source, this inner CustomIframeProvider will transform all JSON RPC to the parent host website.

Quick start

1. Import Chainhop widget to your host website

    <iframe
      title="chainhop"
      name="customIframe"
      className="chainhop-iframe"
      id="Your website id" # refer id, for example, metamask
      src="https://app.chainhop.exchange/" # chainhop website url
      scrolling="no"
      ref={iframeRef}
    /> 

While you are adding the iframe to your website, you must make sure your website domain is whitelisted by ChainHop server.

2. Provide your custom chain & tokens configuration (Optional)

By default, all the chains and tokens supported in Chainhop will expose to you. However. if you expect specific chains and tokens, you can post a JSON message to the widget like this.

{
  referCode: "testWidget",
  domain: window.location.origin,
  swapMode: 2,
  chains: [56, 1, 43114, 10, 250],
  tokenList: [
    {
      chainId: 56,
      symbol: "SFM",
      address: "0x42981d0bfbAf196529376EE702F2a9Eb9092fcB5",
      decimals: 9,
      name: "SafeMoon",
      logoUri: "https://bscscan.com/token/images/safemoon2_32.png",
    },
    {
      chainId: 56,
      symbol: "JST",
      address: "0xeA998D307ACA04D4f0A3B3036Aba84AE2E409C0A",
      decimals: 18,
      name: "JUST",
      logoUri: "https://bscscan.com/token/images/just_32.png",
    },
  ],

const chainhopUrl = URL("https://app.chainhop.exchange/");
window.postMessage(jsonConfig, chainhopUrl.origin); 

3. Handle Messages from the widget.

The Provider communication in the widget will be transformed into your host website. You may implement these functions or use functions provided by web3provider/ether.js. Here is an example, https://github.com/cryptyuyuan/chainhop-widget-demo/blob/e3b9146d940ed0a1042afe685460b2e2530538e5/src/iframe/CustomIframe.tsx#L84

• get_widgetConfig

• wallet_connect

• eth_chainId

• eth_accounts

• eth_requestAccounts

• wallet_switchEthereumChain

• eth_sendTransaction

•eth_getBalance

• eth_call

• eth_getTransactionReceipt

• eth_blockNumber

• eth_estimateGas

• eth_getTransactionByHash

ChainHop Widget Demo Application

You can check our public repo as a quick start demo. Meanwhile, we provide the corresponding demo website here.