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