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).
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
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
- JavaScript
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" />;
}
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);
})();