> ## Documentation Index
> Fetch the complete documentation index at: https://docs.immutable.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Wallet

Display token balances and provide quick access to swap, bridge, and onramp flows.

![Wallet Widget](https://mintcdn.com/immutable-b818fae7/a-_df05Z16XVB-P7/images/checkout/wallet.webp?fit=max\&auto=format\&n=a-_df05Z16XVB-P7\&q=85\&s=644fed4f966d50122bc0e31cf917d71b)

**When to use:**

* Showing player's token balances in-game
* Central hub for accessing funding options
* Post-login wallet dashboard

## Installation

> [tab] npm
>
> ```bash theme={null}
> npm install @imtbl/sdk
> ```

> [tab] yarn
>
> ```bash theme={null}
> yarn add @imtbl/sdk
> ```

## Quick Start

```typescript theme={null}
import { checkout } from '@imtbl/sdk';
import { Environment } from '@imtbl/sdk/config';

const { Checkout, WidgetType, WidgetTheme } = checkout;

const checkoutSDK = new Checkout({
  baseConfig: {
    environment: Environment.SANDBOX, // or Environment.PRODUCTION
    publishableKey: 'YOUR_PUBLISHABLE_KEY',
  },
});
```

```typescript theme={null}
const { CommerceFlowType, CommerceEventType } = checkout;

// 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

| Parameter | Type | Description |
| - | - | - |
| `flow` | `'WALLET'` | Required. Specifies the wallet flow |
| `showDisconnectButton` | `boolean` | Show disconnect option (default: `true`) |
| `showNetworkMenu` | `boolean` | Show network switcher (default: `true`) |

## Events

| Event | Description | Payload |
| - | - | - |
| `CLOSE` | User closed widget | — |
| `DISCONNECTED` | User disconnected wallet | — |
| `USER_ACTION` | User 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

> [card] [Swap Tokens](https://docs.immutable.com/docs/products/checkout/swap.md)
>
> Exchange tokens directly

> [card] [Bridge](https://docs.immutable.com/docs/products/checkout/bridge.md)
>
> Move tokens from Ethereum


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.