Skip to main content
Display token balances and provide quick access to swap, bridge, and onramp flows. Wallet Widget When to use:
  • Showing player’s token balances in-game
  • Central hub for accessing funding options
  • Post-login wallet dashboard

Installation

npm install @imtbl/sdk

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',
  },
});

// Display wallet balances and actions
export async function showWallet(elementId: string) {
  const widgets = await checkoutSDK.widgets({ config: { theme: WidgetTheme.DARK } });
  const widget = widgets.create(WidgetType.IMMUTABLE_COMMERCE);

  widget.mount(elementId, {
    flow: CommerceFlowType.WALLET,
  });

  widget.addListener(CommerceEventType.CLOSE, () => {
    widget.unmount();
  });

  widget.addListener(CommerceEventType.DISCONNECTED, () => {
    widget.unmount();
    // Handle logout in your app
  });

  return widget;
}

Parameters

ParameterTypeDescription
flow'WALLET'Required. Specifies the wallet flow
showDisconnectButtonbooleanShow disconnect option (default: true)
showNetworkMenubooleanShow network switcher (default: true)

Events

EventDescriptionPayload
CLOSEUser closed widget
DISCONNECTEDUser disconnected wallet
USER_ACTIONUser initiated a sub-flow{ action }

User Actions

The wallet can trigger other flows. Listen for these actions: SWAP, BRIDGE, ONRAMP.

What Users See

The wallet flow displays:
  1. Connected wallet address with copy button
  2. Token balances on Immutable Chain
  3. Action buttons for:
    • Swap tokens
    • Bridge from Ethereum
    • Buy with fiat (onramp)
  4. Network selector (if enabled)
  5. Disconnect button (if enabled)

Next Steps