immutable connector package (#288)

* immutable connector package

* immutable passport connector

* passport configuration defined outside of connector; immutable callback route

* fix isAutorized

* connector fix

* improve connection logic

* imports renaming

* regenerate pnpm lock

* immutable updated keys

* immutable conncetor

* immutable conncetor

* immutable conncetor

* immutable conncetor

* immutable connector fixed getProvider

* immutable passport version

* moved dependencies to peerdeps

* documentation

* added connect as a dependency to immutable-connector to fix the build

* fixed multiple connector issues

* immutable connector package version

Author: SamueleA

.changeset/config.json

@@ -3,7 +3,15 @@
   "changelog": ["@changesets/changelog-github", { "repo": "0xsequence/web-sdk" }],
   "commit": false,
   "linked": [],
-  "fixed": [["@0xsequence/connect", "@0xsequence/checkout", "@0xsequence/wallet-widget", "@0xsequence/hooks"]],
+  "fixed": [
+    [
+      "@0xsequence/connect",
+      "@0xsequence/checkout",
+      "@0xsequence/wallet-widget",
+      "@0xsequence/hooks",
+      "@0xsequence/immutable-connector"
+    ]
+  ],
   "access": "public",
   "baseBranch": "master",
   "updateInternalDependencies": "patch",

examples/react/package.json

@@ -15,14 +15,19 @@
     "@0xsequence/connect": "workspace:*",
     "@0xsequence/design-system": "2.0.12",
     "@0xsequence/network": ">= 2.2.13",
-    "@0xsequence/waas": ">= 2.2.13",
     "@0xsequence/wallet-widget": "workspace:*",
+    "@0xsequence/immutable-connector": "workspace:*",
+    "@0xsequence/hooks": "workspace:*",
+    "@0xsequence/waas": ">= 2.2.13",
+    "@imtbl/config": "^2.1.2",
+    "@imtbl/sdk": "^2.1.2",
     "@tanstack/react-query": "^5.62.0",
     "clsx": "^2.1.1",
     "example-shared-components": "workspace:*",
     "motion": "^12.3.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-router-dom": "^7.3.0",
     "tailwindcss": "^4.0.6",
     "typescript": "^5.8.2",
     "viem": "^2.23.10 ",

examples/react/src/App.tsx

@@ -2,8 +2,10 @@ import { SequenceCheckoutProvider } from '@0xsequence/checkout'
 import { SequenceConnect } from '@0xsequence/connect'
 import { ThemeProvider } from '@0xsequence/design-system'
 import { SequenceWalletProvider } from '@0xsequence/wallet-widget'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
 
 import { Homepage } from './components/Homepage'
+import { ImmutableCallback } from './components/ImmutableCallback'
 import { config, checkoutConfig } from './config'
 
 export const App = () => {
@@ -12,7 +14,12 @@ export const App = () => {
       <SequenceConnect config={config}>
         <SequenceWalletProvider>
           <SequenceCheckoutProvider config={checkoutConfig}>
-            <Homepage />
+            <BrowserRouter>
+              <Routes>
+                <Route path="/" element={<Homepage />} />
+                <Route path="/auth/callback" element={<ImmutableCallback />} />
+              </Routes>
+            </BrowserRouter>
           </SequenceCheckoutProvider>
         </SequenceWalletProvider>
       </SequenceConnect>

examples/react/src/components/ImmutableCallback.tsx

@@ -0,0 +1,30 @@
+import { Spinner, Text } from '@0xsequence/design-system'
+import { useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { passportInstance } from '../config'
+
+export function ImmutableCallback() {
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    const handleCallback = async () => {
+      try {
+        await passportInstance.loginCallback()
+        navigate('/')
+      } catch (error) {
+        console.error('Immutable login callback failed:', error)
+        navigate('/')
+      }
+    }
+
+    handleCallback()
+  }, [navigate])
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen">
+      <Spinner size="lg" />
+      <Text marginTop="4">Processing Immutable login...</Text>
+    </div>
+  )
+}

examples/react/src/config.ts

@@ -1,6 +1,9 @@
 import { SequenceCheckoutConfig } from '@0xsequence/checkout'
 import { ConnectConfig, createConfig, WalletType } from '@0xsequence/connect'
+// import { immutable } from '@0xsequence/immutable-connector'
 import { ChainId } from '@0xsequence/network'
+import { Environment } from '@imtbl/config'
+import { passport } from '@imtbl/sdk'
 import { zeroAddress } from 'viem'
 
 const searchParams = new URLSearchParams(location.search)
@@ -64,6 +67,17 @@ export const connectConfig: ConnectConfig = {
     : undefined
 }
 
+export const passportInstance = new passport.Passport({
+  baseConfig: {
+    environment: Environment.SANDBOX,
+    publishableKey: 'pk_imapik-test-VEMeW7wUX7hE7LHg3FxY'
+  },
+  clientId: 'ap8Gv3188GLFROiBFBNFz77DojRpqxnS',
+  redirectUri: `${window.location.origin}/auth/callback`,
+  audience: 'platform_api',
+  scope: 'openid offline_access email transact'
+})
+
 export const config =
   walletType === 'waas'
     ? createConfig('waas', {
@@ -110,7 +124,14 @@ export const config =
 
         walletConnect: {
           projectId: walletConnectProjectId
-        }
+        },
+        additionalWallets: [
+          // Uncomment to enable Immutable
+          // immutable({
+          //   passportInstance,
+          //   environment: Environment.SANDBOX
+          // })
+        ]
       })
 
 export const getErc1155SaleContractConfig = (walletAddress: string) => ({

packages/connect/src/config/defaultConnectors.ts

@@ -47,6 +47,7 @@ export interface DefaultWaasConnectorOptions extends CommonConnectorOptions {
     | {
         projectId: string
       }
+  additionalWallets?: Wallet[]
 
   /**
    * @deprecated use connectors.walletConnect.projectId instead
@@ -84,7 +85,7 @@ export interface DefaultUniversalConnectorOptions extends CommonConnectorOptions
     | {
         projectId: string
       }
-
+  additionalWallets?: Wallet[]
   /**
    * @deprecated, use connectors.walletConnect.projectId instead
    */
@@ -309,5 +310,9 @@ export const getDefaultUniversalConnectors = (options: DefaultUniversalConnector
     )
   }
 
+  if (options?.additionalWallets && options?.additionalWallets.length > 0) {
+    wallets.push(...options.additionalWallets)
+  }
+
   return getConnectWallets(projectAccessKey, wallets)
 }

packages/connect/src/index.ts

@@ -15,7 +15,8 @@ export type {
   EthAuthSettings,
   ModalPosition,
   ConnectConfig,
-  StorageItem
+  StorageItem,
+  LogoProps
 } from './types'
 
 // Config

packages/connect/src/styles.ts

@@ -302,6 +302,9 @@ export const styles = String.raw`
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -383,6 +386,9 @@ export const styles = String.raw`
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -476,6 +482,9 @@ export const styles = String.raw`
   .min-h-full {
     min-height: 100%;
   }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
@@ -551,6 +560,9 @@ export const styles = String.raw`
   .w-screen {
     width: 100vw;
   }
+  .max-w-1 {
+    max-width: calc(var(--spacing) * 1);
+  }
   .max-w-1\/2 {
     max-width: calc(1/2 * 100%);
   }
@@ -575,12 +587,21 @@ export const styles = String.raw`
   .min-w-full {
     min-width: 100%;
   }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .flex-grow {
+    flex-grow: 1;
+  }
   .grow {
     flex-grow: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .origin-top {
     transform-origin: top;
   }
@@ -922,6 +943,9 @@ export const styles = String.raw`
   .pt-0 {
     padding-top: calc(var(--spacing) * 0);
   }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
   .pt-1\.5 {
     padding-top: calc(var(--spacing) * 1.5);
   }
@@ -1191,6 +1215,9 @@ export const styles = String.raw`
   .ring-border-normal {
     --tw-ring-color: var(--seq-color-border-normal);
   }
+  .ring-white {
+    --tw-ring-color: var(--color-white);
+  }
   .ring-white\/10 {
     --tw-ring-color: color-mix(in oklab, var(--color-white) 10%, transparent);
   }
@@ -1226,6 +1253,10 @@ export const styles = String.raw`
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));

packages/immutable-connector/README.md

@@ -0,0 +1,42 @@
+# Immutable connector for Sequence Web-SDK
+
+## Installation
+
+To install this package:
+
+```bash
+npm install @0xsequence/immutable-connector @imtbl/config @imtbl/sdk
+# or
+
+pnpm install @0xsequence/immutable-connector @imtbl/config @imtbl/sdk
+# or
+yarn add @0xsequence/immutable-connector @imtbl/config @imtbl/sdk
+```
+
+## Adding the connect
+
+First, an Immutable Passport instance must be created with valid and correctly configured Immutable keys.
+
+Note, that the application will need a callback route configured similarly to this example: https://github.com/immutable/ts-immutable-sdk/blob/main/examples/passport/login-with-nextjs/src/app/redirect/page.tsx
+
+```js
+export const passportInstance = new passport.Passport({
+  baseConfig: {
+    environment: Environment.SANDBOX,
+    publishableKey: 'my_publisheable_key'
+  },
+  clientId: 'my_client_id',
+  redirectUri: `${window.location.origin}/auth/callback`,
+  audience: 'platform_api',
+  scope: 'openid offline_access email transact'
+})
+```
+
+Finally, the wallet can be passed down to the web-sdk configuration similarly to other wallets,
+
+```js
+immutable({
+  passportInstance,
+  environment: Environment.SANDBOX
+})
+```

packages/immutable-connector/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@0xsequence/immutable-connector",
+  "version": "5.0.9",
+  "description": "Immutable connector for Sequence Kit",
+  "repository": "https://github.com/0xsequence/web-sdk/tree/master/packages/immutable-connector",
+  "author": "Horizon Blockchain Games",
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/esm/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "pnpm build:clean && pnpm build:esm && pnpm build:cjs",
+    "build:cjs": "tsc --module commonjs --declaration --declarationMap --outDir dist/cjs && echo '{ \"type\": \"commonjs\" }' > dist/cjs/package.json",
+    "build:esm": "tsc --module es2022 --declaration --declarationMap --outDir dist/esm",
+    "build:clean": "rimraf -g ./dist",
+    "build:check": "attw --pack .",
+    "dev": "tsc --watch --module es2022 --declaration --declarationMap --outDir dist/esm",
+    "test": "echo",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@0xsequence/connect": "workspace:*"
+  },
+  "peerDependencies": {
+    "@0xsequence/connect": "workspace:*",
+    "0xsequence": "^2.2.13",
+    "@imtbl/config": ">=2.1.2",
+    "@imtbl/sdk": ">=2.1.2",
+    "ethers": "^6.13.0",
+    "react": ">= 17 < 19",
+    "react-dom": ">= 17 < 19",
+    "viem": "^2.0.0",
+    "wagmi": "^2.14.11"
+  }
+}