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

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

**When to use:**

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

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

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

<Info>
  Any EIP-1193 compatible wallet injected into the browser will appear automatically.
</Info>

## Next Steps

<CardGroup cols={2}>
  <Card title="Wallet Dashboard" icon="wallet" href="/docs/products/checkout/wallet">
    Show balances after connection
  </Card>

  <Card title="Passport" icon="id-card" href="/docs/products/passport/overview">
    Learn about Passport authentication
  </Card>
</CardGroup>


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