Support other wallets

The Commerce Widget allow for other wallets/providers to be used by passing in a WrappedBrowserProvider (imported from the Checkout SDK). This integration allows to utilise wallets that aren't part of the supported wallets (e.g. Rainbow).

---

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 WrappedBrowserProvider object into the widget during widget creation.

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 the checkout WrappedBrowserProvider
  const wrappedBrowserProvider = new checkout.WrappedBrowserProvider(/* 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: wrappedBrowserProvider,
        // 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(wrappedBrowserProvider);
    })();
  }, []);

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

JavaScript

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

// Initialize Checkout SDK
var checkout;
var wrappedBrowserProvider;
/** Initialise wrappedBrowserProvider */
wrappedBrowserProvider = new checkout.WrappedBrowserProvider(/* 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: wrappedBrowserProvider,
    // 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(wrappedBrowserProvider);
})();