0xsequence · taylanpince · Apr 7, 2025 · Mar 4, 2025 · Mar 7, 2025 · Mar 7, 2025
@@ -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",

@@ -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 ",

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

@@ -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>
+  )
+}
@@ -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) => ({

@@ -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)
 }
@@ -15,7 +15,8 @@ export type {
   EthAuthSettings,
   ModalPosition,
   ConnectConfig,
-  StorageItem
+  StorageItem,
+  LogoProps
 } from './types'
 
 // Config

@@ -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));

@@ -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
+})
+```
@@ -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"
+  }
+}
@@ -0,0 +1,26 @@
+import { LogoProps } from '@0xsequence/connect'
+import React from 'react'
+
+export const ImmutableLogo: React.FunctionComponent = (props: LogoProps) => {
+  return (
+    <svg
+      fill="#FFFFFF"
+      version="1.1"
+      id="Layer_1"
+      x="0px"
+      y="0px"
+      viewBox="0 0 280 280"
+      width="280"
+      height="280"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <defs id="defs1" />
+      <style type="text/css" id="style1"></style>
+      <path
+        d="M 140,0 C 62.68,0 0,62.68 0,140 0,217.32 62.68,280 140,280 217.32,280 280,217.32 280,140 280,62.68 217.32,0 140,0 Z m -6.06,56.57 c 3.89,-1.9 7.99,-1.78 11.75,0.37 13.07,7.45 26.1,14.96 39.08,22.57 4.18,2.45 6.31,6.39 6.33,11.21 0.08,16.92 0.05,33.83 0,50.75 0,0.63 -0.41,1.54 -0.91,1.84 -5.03,2.99 -10.12,5.89 -15.63,9.06 0,-1.11 0,-1.89 0,-2.66 0,-17.4 -0.05,-34.8 0.04,-52.2 0.02,-3.34 -1.14,-5.49 -4.1,-7.18 -15.18,-8.62 -30.27,-17.41 -45.39,-26.14 -0.65,-0.38 -1.29,-0.78 -2.28,-1.38 3.9,-2.21 7.41,-4.43 11.11,-6.24 z m -2.78,173.13 c -0.84,-0.44 -1.48,-0.74 -2.09,-1.09 -20.03,-11.55 -40.03,-23.17 -60.12,-34.63 -5.63,-3.22 -8.2,-7.79 -8.15,-14.22 0.11,-13.68 0.08,-27.35 0.01,-41.03 -0.03,-6.18 2.48,-10.65 7.9,-13.73 14.1,-8.02 28.13,-16.17 42.16,-24.32 1.21,-0.7 2.1,-0.82 3.36,-0.06 4.85,2.91 9.77,5.69 14.92,8.66 -0.98,0.58 -1.73,1.04 -2.48,1.47 -15.18,8.77 -30.35,17.56 -45.57,26.27 -2.5,1.43 -3.65,3.28 -3.63,6.17 0.08,10.78 0.09,21.55 0,32.33 -0.03,2.98 1.15,4.86 3.72,6.33 16.06,9.18 32.06,18.48 48.11,27.68 1.36,0.78 1.94,1.59 1.9,3.22 -0.12,5.52 -0.04,11.04 -0.04,16.95 z m 0,-30.87 c -1.39,-0.79 -2.4,-1.36 -3.4,-1.94 -12.73,-7.35 -25.45,-14.72 -38.21,-22.01 -1.38,-0.79 -1.89,-1.63 -1.87,-3.23 0.09,-8.29 0.06,-16.57 0.02,-24.86 0,-1.12 0.17,-1.9 1.28,-2.51 4.7,-2.62 9.34,-5.36 14,-8.04 0.34,-0.19 0.7,-0.34 1.32,-0.64 0,3.28 0,6.29 0,9.3 0,5.04 0.08,10.08 -0.03,15.12 -0.06,2.87 1.04,4.81 3.55,6.23 7.21,4.07 14.33,8.3 21.55,12.35 1.42,0.8 1.85,1.68 1.82,3.25 -0.09,5.51 -0.03,11.03 -0.03,16.98 z M 116.45,90.08 c -2.7,-1.59 -5.01,-1.57 -7.71,0.01 -15.14,8.84 -30.34,17.57 -45.52,26.34 -0.64,0.37 -1.31,0.71 -2.44,1.33 0.4,-5.77 -0.83,-11.21 1.13,-16.48 1.07,-2.88 3.08,-5.05 5.74,-6.59 12.67,-7.32 25.33,-14.66 38.02,-21.93 4.63,-2.66 9.36,-2.59 13.99,0.07 14.41,8.3 28.82,16.62 43.2,24.97 0.61,0.36 1.38,1.15 1.39,1.74 0.1,5.93 0.06,11.85 0.06,18.22 -5.23,-3.02 -10.06,-5.81 -14.89,-8.59 -11,-6.35 -22.02,-12.65 -32.97,-19.09 z m 101.32,93.15 c -0.37,4.66 -3.11,7.97 -7.14,10.28 -15.44,8.88 -30.85,17.79 -46.28,26.7 -4.84,2.79 -9.68,5.59 -14.53,8.38 -0.58,0.34 -1.19,0.63 -1.98,1.05 -0.05,-0.8 -0.12,-1.39 -0.12,-1.98 -0.01,-5.11 0.03,-10.22 -0.03,-15.33 -0.01,-1.15 0.28,-1.87 1.34,-2.48 22.5,-12.94 44.97,-25.93 67.45,-38.9 0.34,-0.2 0.71,-0.35 1.35,-0.66 0.01,4.53 0.27,8.76 -0.06,12.94 z m 0.11,-32.21 c -0.04,5.3 -2.89,9.02 -7.43,11.62 -17.59,10.11 -35.16,20.28 -52.73,30.42 -3.21,1.85 -6.43,3.7 -9.88,5.68 -0.05,-0.87 -0.12,-1.45 -0.12,-2.04 -0.01,-5.04 0.05,-10.08 -0.04,-15.13 -0.02,-1.43 0.45,-2.2 1.69,-2.91 15.99,-9.17 31.91,-18.45 47.92,-27.57 2.85,-1.62 4.1,-3.61 4.08,-6.95 -0.12,-17.4 -0.06,-34.81 -0.06,-52.21 0,-0.83 0,-1.65 0,-3.04 4.18,2.52 8.08,4.59 11.66,7.12 3.26,2.31 4.9,5.81 4.92,9.84 0.06,15.06 0.1,30.11 -0.01,45.17 z"
+        id="path1"
+      />
+    </svg>
+  )
+}