> ## Documentation Index
> Fetch the complete documentation index at: https://layerswaplabsv0-main-depositactionsguide.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Immutable Passport Wallet

## Overview

The Immutable Passport provider offers Immutable's gaming-focused wallet solution with seamless onboarding. It requires EVM provider as a dependency.

## Installation

<CodeGroup>
  ```typescript yarn theme={"system"} theme={null}
  yarn add @layerswap/wallet-imtbl-passport @layerswap/wallet-evm wagmi viem @tanstack/react-query
  ```

  ```typescript pnpm theme={"system"} theme={null}
  pnpm add @layerswap/wallet-imtbl-passport @layerswap/wallet-evm wagmi viem @tanstack/react-query
  ```

  ```typescript npm theme={"system"} theme={null}
  npm install @layerswap/wallet-imtbl-passport @layerswap/wallet-evm wagmi viem @tanstack/react-query
  ```
</CodeGroup>

## Setting up Immutable Passport

Before you can use Immutable Passport in your application, you need to create and configure your Passport credentials:

1. Go to [https://hub.immutable.com/](https://hub.immutable.com/) and log in
2. Create a new Passport configuration for your application
3. Configure the `redirectUri` with the correct path where you'll create your redirect page
   * This URI must match the path where you implement the `ImtblRedirectPage` component (shown in the example below)
   * For example, if you set `redirectUri: "https://yourapp.com/imtbl-redirect"`, you need to create a page at that path that renders the `ImtblRedirectPage` component

<Note>
  The redirect page is essential for the Immutable Passport authentication flow. Make sure the `redirectUri` in your Immutable Hub configuration exactly matches the path where you deploy the `ImtblRedirectPage` component.
</Note>

***

## Basic Usage

The Immutable Passport provider must be used alongside the EVM provider:

<CodeGroup>
  ```typescript WidgetPage.tsx theme={null}
  import { LayerswapProvider, Swap } from "@layerswap/widget"
  import { createEVMProvider, createImmutablePassportProvider } from "@layerswap/wallet-imtbl-passport"
  import "@layerswap/widget/index.css"
  import { imtblPassportConfigs, walletConnectConfigs } from "./configs"

  export const WidgetPage = () => {
    const walletProviders = [
      createEVMProvider({ walletConnectConfigs }),
      createImmutablePassportProvider({ imtblPassportConfigs })
    ]

    return (
      <LayerswapProvider
        walletProviders={walletProviders}
      >
        <Swap />
      </LayerswapProvider>
    )
  }
  ```

  ```typescript ImtblRedirectPage.tsx theme={null}
  import { LayerswapProvider } from "@layerswap/widget"
  import { createEVMProvider, createImmutablePassportProvider, ImtblRedirect } from "@layerswap/wallet-imtbl-passport"
  import "@layerswap/widget/index.css"
  import { imtblPassportConfigs, walletConnectConfigs } from "./configs"

  export const ImtblRedirectPage = () => {
    const walletProviders = [
      createEVMProvider({ walletConnectConfigs }),
      createImmutablePassportProvider({ imtblPassportConfigs })
    ]

    return (
      <LayerswapProvider
        walletProviders={walletProviders}
      >
        <ImtblRedirect />
      </LayerswapProvider>
    )
  }
  ```

  ```typescript configs.ts theme={null}
  export const walletConnectConfigs = {
    projectId: "YOUR_WALLETCONNECT_PROJECT_ID",
    name: "Your App Name",
    description: "Your app description",
    url: "https://yourapp.com",
    icons: ["https://yourapp.com/logo.png"]
  }

  export const imtblPassportConfigs = {
    clientId: "YOUR_CLIENT_ID",
    publishableKey: "YOUR_PUBLISHABLE_KEY",
    redirectUri: "https://yourapp.com/imtbl-redirect",
    logoutRedirectUri: "https://yourapp.com"
  }
  ```
</CodeGroup>

***

## Configuration

### Immutable Passport Configuration

The Immutable Passport provider requires specific configuration:

```typescript theme={null}
import { createImmutablePassportProvider } from "@layerswap/wallet-imtbl-passport"
import type { ImtblPassportConfig } from "@layerswap/wallet-imtbl-passport"

const imtblPassportConfigs: ImtblPassportConfig = {
  publishableKey: string,      // Required: Your publishable key
  clientId: string,            // Required: Your client ID
  redirectUri: string,         // Required: Redirect URI for auth flow
  logoutRedirectUri: string    // Required: Redirect URI after logout
}

const passportProvider = createImmutablePassportProvider({ imtblPassportConfigs })
```

***

## Dependencies

<Note>
  The Immutable Passport provider depends on the EVM provider. Make sure to include both providers in your configuration.
</Note>

The Immutable Passport provider requires:

* **EVM Provider** - For Ethereum wallet connections
* **Immutable Passport Provider** - For Passport-specific functionality