Support other wallets

The Checkout widgets allow for other wallets/providers to be used by passing in a Web3Provider (used with the ethers js library). This integration allows to utilise wallets that aren't part of the supported wallets (e.g. Rainbow).

---

Dependency on the ethers js library

To support passing Web3Provider objects into the Checkout widgets, you will need to install the ethers js library (v5).

npm install ethers@5

yarn add ethers@5

note

If a provider isn't set, the Checkout widgets will automatically prompt the user to connect with one of the supported wallets. This allows you to drop-in any of the Checkout widgets without any further configuration.

React

Set your application's Web3Provider object into the widget during widget creation.

import { useEffect, useState } from 'react';
import { checkout } from '@imtbl/sdk';
import { Web3Provider } from '@ethersproject/providers';

// create Checkout SDK
const checkoutSDK = new checkout.Checkout();

export function App() {
  const [wallet, setWallet] =
    useState<checkout.Widget<typeof checkout.WidgetType.WALLET>>();

  // @ts-ignore You will need to handle your own wallet provider creation and wrap it in a ethers js Web3Provider
  const otherWeb3Provider = new Web3Provider(/* other wallet provider */);

  // Initialise widgets, create wallet widget
  useEffect(() => {
    (async () => {
      const widgets = await checkoutSDK.widgets({
        config: { theme: checkout.WidgetTheme.DARK },
      });

      // Pass your otherWeb3Provider into the create method when creating a new widget.
      const wallet = widgets.create(checkout.WidgetType.WALLET, {
        config: { theme: checkout.WidgetTheme.DARK },
        provider: otherWeb3Provider
      });

      setWallet(wallet)

      wallet.mount("wallet")
    })();
  }, []);

  return (<div id="wallet" />);
}

JavaScript

Set your application's Web3Provider object into the widget during widget creation.

// Initialize Checkout SDK
var checkout;
var otherWeb3Provider;
/** Initialise otherWeb3Provider */
otherWeb3Provider = new Web3Provider(/* other provider */);
(async function () {
  checkout = new ImmutableCheckout.Checkout();

  const widgets = await checkout.widgets({
    config: { theme: ImmutableCheckout.WidgetTheme.DARK },
  });

  const wallet = widgets.create(ImmutableCheckout.WidgetType.WALLET, {
    config: { theme: ImmutableCheckout.WidgetTheme.DARK },
    provider: otherWeb3Provider,
  });

  wallet.mount('wallet');
})();