Skip to main content

​
Install Immutable Passport wallet package

To get started, install the latest version of Immutable Passport and EVM packages. 
yarn add @layerswap/wallet-imtbl-passport @layerswap/wallet-evm wagmi viem @tanstack/react-query
Wagmi is a React Hooks library for Ethereum. Viem is a low-level TypeScript Interface for Ethereum that enables developers to interact with the blockchain. TanStack Query is an async state manager that handles fetching, caching, synchronizing and more.

​
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 example

The example below shows how to preconfigure a basic wallet management with native widget package. 
import { LayerswapProvider, Swap } from "@layerswap/widget";
import { EVMProvider } from "@layerswap/wallet-evm"
import { ImtblPassportProvider } from "@layerswap/wallet-imtbl-passport"
import { imtblPassportConfigs } from "./configs"

export const WidgetPage = () => {

  return (
    <LayerswapProvider 
      config={{
        imtblPassportConfigs
      }}
      walletProviders={[EVMProvider, ImtblPassportProvider]}
    >
      <Swap/>
    </LayerswapProvider>
  );
};

​
Immutable Passport configs

imtblPassportConfigs: {
    publishableKey: string,
    clientId: string,
    redirectUri: string,
    logoutRedirectUri: string
}