Skip to main content

​
Overview

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

​
Installation

yarn add @layerswap/wallet-imtbl-passport @layerswap/wallet-evm wagmi viem @tanstack/react-query

pnpm add @layerswap/wallet-imtbl-passport @layerswap/wallet-evm wagmi viem @tanstack/react-query

npm install @layerswap/wallet-imtbl-passport @layerswap/wallet-evm wagmi viem @tanstack/react-query

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

​
Basic Usage

The Immutable Passport provider must be used alongside the EVM provider: 
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>
  )
}

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>
  )
}

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"
}

​
Configuration

​
Immutable Passport Configuration

The Immutable Passport provider requires specific configuration: 
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

The Immutable Passport provider depends on the EVM provider. Make sure to include both providers in your configuration.
The Immutable Passport provider requires:
  • EVM Provider - For Ethereum wallet connections
  • Immutable Passport Provider - For Passport-specific functionality