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

# Connect

Connect Passport, MetaMask, WalletConnect, and other EIP-1193 wallets.

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

**When to use:**

* Initial user authentication
* Connecting wallets before transactions
* Switching between wallets

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

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

> [!NOTE]
>
> Any EIP-1193 compatible wallet injected into the browser will appear automatically.

## Next Steps

> [card] [Wallet Dashboard](https://docs.immutable.com/docs/products/checkout/wallet.md)
>
> Show balances after connection

> [card] [Passport](https://docs.immutable.com/docs/products/passport/overview.md)
>
> Learn about Passport authentication


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