> ## 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.

<img src="https://mintcdn.com/immutable-b818fae7/a-_df05Z16XVB-P7/images/checkout/wallet.webp?fit=max&auto=format&n=a-_df05Z16XVB-P7&q=85&s=644fed4f966d50122bc0e31cf917d71b" alt="Wallet Widget" noZoom style={{float: 'right', width: '200px', borderRadius: '8px', marginLeft: '24px', marginBottom: '16px'}} width="860" height="1300" data-path="images/checkout/wallet.webp" />

**When to use:**

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

## Installation

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install @imtbl/sdk
    ```
  </Tab>

  <Tab title="yarn">
    ```bash theme={null}
    yarn add @imtbl/sdk
    ```
  </Tab>
</Tabs>

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

<CardGroup cols={2}>
  <Card title="Swap Tokens" icon="arrow-right-arrow-left" href="/docs/products/checkout/swap">
    Exchange tokens directly
  </Card>

  <Card title="Bridge" icon="bridge" href="/docs/products/checkout/bridge">
    Move tokens from Ethereum
  </Card>
</CardGroup>