Connect Passport, MetaMask, WalletConnect, and other EIP-1193 wallets.
When to use:
- Initial user authentication
- Connecting wallets before transactions
- Switching between wallets
Installation
Quick Start
import { checkout } from '@imtbl/sdk';
import { Environment } from '@imtbl/sdk/config';
const { Checkout, WidgetType, WidgetTheme, CommerceFlowType, CommerceEventType } = checkout;
const checkoutSDK = new Checkout({
baseConfig: {
environment: Environment.SANDBOX,
publishableKey: 'YOUR_PUBLISHABLE_KEY',
},
});
// Basic connect flow
export async function connectWallet(elementId: string) {
const widgets = await checkoutSDK.widgets({ config: { theme: WidgetTheme.DARK } });
const widget = widgets.create(WidgetType.IMMUTABLE_COMMERCE);
widget.mount(elementId, { flow: CommerceFlowType.CONNECT });
widget.addListener(CommerceEventType.SUCCESS, async (data) => {
console.log('Connected:', data);
widget.unmount();
});
widget.addListener(CommerceEventType.CLOSE, () => {
widget.unmount();
});
widget.addListener(CommerceEventType.FAILURE, (data) => {
console.error('Connection failed:', data);
widget.unmount();
});
return widget;
}
// Wallet RDNS identifiers
export const WALLET_RDNS = {
passport: 'com.immutable.passport',
metamask: 'io.metamask',
coinbase: 'com.coinbase.wallet',
} as const;
Parameters
| Parameter | Type | Description |
|---|
flow | 'CONNECT' | Required. Specifies the connect flow |
targetWalletRdns | string | Optional. Target specific wallet by RDNS |
targetChainId | string | Optional. Target chain to connect to |
blocklistWalletRdns | string[] | Optional. Wallets to hide from selection |
Events
| Event | Description | Payload |
|---|
SUCCESS | Wallet connected | { walletProviderName, provider } |
FAILURE | Connection failed | { error } |
CLOSE | User closed widget | — |
Supported Wallets
| Wallet | RDNS | Notes |
|---|
| Passport | com.immutable.passport | Recommended for games |
| MetaMask | io.metamask | Browser extension |
| WalletConnect | — | Mobile wallets |
| Coinbase Wallet | com.coinbase.wallet | Browser + mobile |
Any EIP-1193 compatible wallet injected into the browser will appear automatically.
Next Steps