Fund

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

// Fund flow - get specific tokens via swap, bridge, or onramp
export async function fundToken(
  elementId: string,
  options: {
    toTokenAddress: string;
    toAmount: string;
  }
) {
  const widgets = await checkoutSDK.widgets({ config: { theme: WidgetTheme.DARK } });
  const widget = widgets.create(WidgetType.IMMUTABLE_COMMERCE);

  widget.mount(elementId, {
    flow: CommerceFlowType.ADD_TOKENS,
    toTokenAddress: options.toTokenAddress,
    toAmount: options.toAmount,
  });

  widget.addListener(CommerceEventType.SUCCESS, (data) => {
    console.log('Fund complete:', data);
    widget.unmount();
  });

  widget.addListener(CommerceEventType.FAILURE, (data) => {
    console.error('Fund failed:', data);
    widget.unmount();
  });

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

  return widget;
}

User needs 100 USDC
    ↓
Check wallet balances
    ↓
┌─────────────────────────────────────────┐
│ Options presented to user:              │
│ • Swap 150 IMX → 100 USDC (if has IMX)  │
│ • Bridge USDC from Ethereum (if has)    │
│ • Buy 100 USDC with card                │
└─────────────────────────────────────────┘
    ↓
User completes preferred flow