Support other wallets

The Commerce Widget 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 Commerce Widget, 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 Commerce Widget will automatically prompt the user to connect with one of the supported wallets. This allows you to drop-in any of the Commerce Widgets without any further configuration.

React

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

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

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

export function App() {
  // @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 */);

  useEffect(() => {
    (async () => {
      // Create a factory
      const factory = await checkoutSDK.widgets({
        config: { theme: checkout.WidgetTheme.DARK, language: 'en' },

      });

      // Create a widget
      const widget = factory.create(checkout.WidgetType.IMMUTABLE_COMMERCE, {
        provider: otherWeb3Provider,
        // optionally pass any WalletWidgetConfiguration options
        config: {
          WALLET: {
            // showDisconnectButton: true,
            // showNetworkMenu: true,
          },

        },
      });

      // Mount a connect flow, optionally pass any ConnectWidgetParams
      widget.mount('mount-point', {
        flow: checkout.CommerceFlowType.WALLET,
      });



      // The provider can also be updated using the factory
      factory.updateProvider(otherWeb3Provider);
    })();
  }, []);

  return <div id="mount-point" />;
}

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 () {
  // Create a factory
  const factory = await checkoutSDK.widgets({
    config: { theme: checkout.WidgetTheme.DARK, language: 'en' },
  });

  // Create a widget
  const widget = factory.create(checkout.WidgetType.IMMUTABLE_COMMERCE, {
    provider: otherWeb3Provider,
    // optionally pass any WalletWidgetConfiguration options
    config: {
      WALLET: {
        // showDisconnectButton: true,
        // showNetworkMenu: true,
      },
    },
  });

  // Mount a connect flow, optionally pass any ConnectWidgetParams
  widget.mount('mount-point', {
    flow: checkout.CommerceFlowType.WALLET,
  });

  // The provider can also be updated using the factory
  factory.updateProvider(otherWeb3Provider);
})();