@lumiapassport/ui-kit 1.17.9 → 1.17.11

package/README.md

@@ -305,6 +305,7 @@ This ensures returning users keep their preferred chain while new users start on
       requestDeduplication: true,
       kycNeeded: false,
       displayNameNeeded: false,
+      showActiveBalanceAsFiat: false,
     },
 
     // KYC configuration (if needed)
@@ -328,6 +329,7 @@ This ensures returning users keep their preferred chain while new users start on
       rpcUrl: 'https\:\/\/beam-rpc.lumia.org',
       explorerUrl: 'https\:\/\/beam-explorer.lumia.org',
       testnet: true,
+      forceChain: false, // if true, passport is immediatly forced to switch itto provided chainId, chain selector via SeetingsMenu becomes anavailable
     },
   }}
   callbacks={{
@@ -352,6 +354,9 @@ This ensures returning users keep their preferred chain while new users start on
     onWalletReady: (status) => {
       console.log('Wallet ready:', status.ready);
     },
+    onLumiaPassportChainChange: ({ chainId, previousChainId }) => {
+      console.log('Chain Changed:', { previousChainId, chainId })
+    },
   }}
 >
 ```
@@ -387,6 +392,7 @@ function MyComponent() {
 
 ### Lumia Passport shared store values hooks
 
+- **useLumiaPassportActiveChainId** - Returns current ChainID
 - **useLumiaPassportIsMobileView** - Returns boolean indicating if UI is in mobile view mode
 - **useLumiaPassportAccountSession** - Returns current user session object with userId, addresses, and auth info
 - **useLumiaPassportLoadingStatus** - Returns `{ isSessionLoading, sessionStatus }` for tracking authentication state
@@ -755,26 +761,6 @@ function CustomAuthButton() {
 }
 ```
 
-### useLumiaPassportColorMode - Theme Control
-
-Control light/dark mode for Lumia Passport UI. Use hook to sync colorMode inside your App instead of any local colorMode states
-
-```tsx
-import { useLumiaPassportColorMode } from '@lumiapassport/ui-kit'
-
-function ThemeSelector() {
-  const { colorMode, setColorMode } = useLumiaPassportColorMode()
-
-  return (
-    <div>
-      <p>Current theme: {colorMode}</p>
-      <button onClick={() => setColorMode('light')}>Light</button>
-      <button onClick={() => setColorMode('dark')}>Dark</button>
-    </div>
-  )
-}
-```
-
 ### ThemeToggle - Quick Theme Switcher
 
 Pre-built theme toggle button component to use in combo with useLumiaPassportColorMode.
@@ -838,7 +824,117 @@ Connect existing wallets (MetaMask, WalletConnect, etc.).
 
 ## Styling
 
-...to be updated
+### Passport Dialog Window
+
+Global Passport window view can be redefined via config prop by providing specific dialogClassName.
+
+> **Note** Providing "dialogClassName" will disable default dialog window styles
+
+```css
+.passport-dialog-classname {
+  background-color: rgba(14, 14, 14, 0.7);
+  backdrop-filter: blur(10px);
+
+  box-shadow:
+    0 0 8px rgba(14, 14, 14, 0.1),
+    inset 0 0 0 1px var(--lumia-passport-bd);
+}
+```
+
+```tsx
+import 'index.css'
+
+<LumiaPassportProvider
+  ...
+  initialConfig={{
+    ...
+    ui: {
+      ...
+      dialogClassName: 'passport-dialog-classname',
+      ...
+    },
+    ...
+  }}/>
+```
+
+### Passport styles
+
+Passport provides global hook for Light/Dark modes - useLumiaPassportColorMode - use it within yor application instead of any local mode declaration.
+
+```tsx
+import { useLumiaPassportColorMode } from '@lumiapassport/ui-kit'
+
+function YourAnyComponent() {
+  const { colorMode, setColorMode } = useLumiaPassportColorMode()
+
+  return (
+    <div>
+      <p>Current theme: {colorMode}</p>
+      <button onClick={() => setColorMode('light')}>Light</button>
+      <button onClick={() => setColorMode('dark')}>Dark</button>
+    </div>
+  )
+}
+```
+
+Passport styles are possible to match with your project via css-variables set (use separate for dark & light).
+Values will be automatically applied according to selected colorMode.
+The simpliest way to customize cssv is via app index.css file:
+
+```css
+.lumia-scope[data-lumia-passport-mode='light'],
+.lumia-scope[data-lumia-passport-mode='dark'] {
+  /* fixed cssv */
+  --lumia-passport-maw: 384px;
+  --lumia-passport-pd: 12px;
+  --lumia-passport-gap: 10px;
+  --lumia-passport-bdrs: 20px;
+  --lumia-passport-element-bdrs: 10px;
+
+  /** overlay */
+  --lumia-passport-overlay: rgba(255, 255, 255, 0.8);
+  --lumia-passport-backdrop-blur: 10px;
+
+  /** surface backgrounds */
+  --lumia-passport-bg: #ffffff;
+
+  /** text */
+  --lumia-passport-fg: #000000;
+  --lumia-passport-fg-h: rgba(0, 0, 0, 0.6);
+  --lumia-passport-fg-a: rgba(0, 0, 0, 0.4);
+  --lumia-passport-fg-inverted: #ffffff;
+  --lumia-passport-fg-muted: rgba(0, 0, 0, 0.6);
+
+  /** backgrounds i.e. buttons bg etc */
+  --lumia-passport-primary: #000000;
+  --lumia-passport-primary-h: rgba(0, 0, 0, 0.8);
+  --lumia-passport-primary-a: rgba(0, 0, 0, 0.6);
+
+  --lumia-passport-secondary: #e4e4e4;
+  --lumia-passport-secondary-h: rgba(228, 228, 228, 0.8);
+  --lumia-passport-secondary-a: rgba(228, 228, 228, 0.6);
+
+  /** borders */
+  --lumia-passport-bd: #ebebeb;
+  --lumia-passport-bd-intense: rgb(169, 169, 169);
+
+  /** shadows */
+  --lumia-passport-shadow-c: rgba(0, 0, 0, 0.1);
+
+  /** highlight colors */
+  --lumia-passport-info: #000000;
+  --lumia-passport-bg-info: #e4e4e4;
+
+  --lumia-passport-success: #000000;
+  --lumia-passport-bg-success: #21ff51;
+
+  --lumia-passport-warning: #000000;
+  --lumia-passport-bg-warning: #e9fa00;
+
+  --lumia-passport-error: #ffffff;
+  --lumia-passport-bg-error: #d6204e;
+}
+```
 
 ## TypeScript Support
 

package/dist/iframe/index.html

@@ -15,7 +15,7 @@
     <meta http-equiv="X-Content-Type-Options" content="nosniff" />
     <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
 
-    <title>Lumia Passport Secure Wallet - iframe version 1.17.9</title>
+    <title>Lumia Passport Secure Wallet - iframe version 1.17.11</title>
 
     <!-- Styles will be injected by build process -->
     <style>

package/dist/iframe/main.js

@@ -548,7 +548,7 @@ var init_local_backup = __esm({
   }
 });
 
-// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/utils/data/isHex.js
+// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/utils/data/isHex.js
 function isHex(value, { strict = true } = {}) {
   if (!value)
     return false;
@@ -557,31 +557,31 @@ function isHex(value, { strict = true } = {}) {
   return strict ? /^0x[0-9a-fA-F]*$/.test(value) : value.startsWith("0x");
 }
 var init_isHex = __esm({
-  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/utils/data/isHex.js"() {
+  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/utils/data/isHex.js"() {
   }
 });
 
-// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/utils/data/size.js
+// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/utils/data/size.js
 function size(value) {
   if (isHex(value, { strict: false }))
     return Math.ceil((value.length - 2) / 2);
   return value.length;
 }
 var init_size = __esm({
-  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/utils/data/size.js"() {
+  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/utils/data/size.js"() {
     init_isHex();
   }
 });
 
-// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/errors/version.js
+// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/errors/version.js
 var version;
 var init_version = __esm({
-  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/errors/version.js"() {
+  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/errors/version.js"() {
     version = "2.38.0";
   }
 });
 
-// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/errors/base.js
+// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/errors/base.js
 function walk(err, fn) {
   if (fn?.(err))
     return err;
@@ -591,7 +591,7 @@ function walk(err, fn) {
 }
 var errorConfig, BaseError;
 var init_base = __esm({
-  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/errors/base.js"() {
+  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/errors/base.js"() {
     init_version();
     errorConfig = {
       getDocsUrl: ({ docsBaseUrl, docsPath = "", docsSlug }) => docsPath ? `${docsBaseUrl ?? "https://viem.sh"}${docsPath}${docsSlug ? `#${docsSlug}` : ""}` : void 0,
@@ -671,10 +671,10 @@ var init_base = __esm({
   }
 });
 
-// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/errors/data.js
+// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/errors/data.js
 var SizeExceedsPaddingSizeError;
 var init_data = __esm({
-  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/errors/data.js"() {
+  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/errors/data.js"() {
     init_base();
     SizeExceedsPaddingSizeError = class extends BaseError {
       constructor({ size: size2, targetSize, type }) {
@@ -684,7 +684,7 @@ var init_data = __esm({
   }
 });
 
-// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/utils/data/pad.js
+// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/utils/data/pad.js
 function pad(hexOrBytes, { dir, size: size2 = 32 } = {}) {
   if (typeof hexOrBytes === "string")
     return padHex(hexOrBytes, { dir, size: size2 });
@@ -719,15 +719,15 @@ function padBytes(bytes, { dir, size: size2 = 32 } = {}) {
   return paddedBytes;
 }
 var init_pad = __esm({
-  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/utils/data/pad.js"() {
+  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/utils/data/pad.js"() {
     init_data();
   }
 });
 
-// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/errors/encoding.js
+// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/errors/encoding.js
 var IntegerOutOfRangeError, SizeOverflowError;
 var init_encoding = __esm({
-  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/errors/encoding.js"() {
+  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/errors/encoding.js"() {
     init_base();
     IntegerOutOfRangeError = class extends BaseError {
       constructor({ max, min, signed, size: size2, value }) {
@@ -742,7 +742,7 @@ var init_encoding = __esm({
   }
 });
 
-// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/utils/encoding/fromHex.js
+// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/utils/encoding/fromHex.js
 function assertSize(hexOrBytes, { size: size2 }) {
   if (size(hexOrBytes) > size2)
     throw new SizeOverflowError({
@@ -751,13 +751,13 @@ function assertSize(hexOrBytes, { size: size2 }) {
     });
 }
 var init_fromHex = __esm({
-  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/utils/encoding/fromHex.js"() {
+  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/utils/encoding/fromHex.js"() {
     init_encoding();
     init_size();
   }
 });
 
-// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/utils/encoding/toHex.js
+// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/utils/encoding/toHex.js
 function toHex(value, opts = {}) {
   if (typeof value === "number" || typeof value === "bigint")
     return numberToHex(value, opts);
@@ -822,7 +822,7 @@ function stringToHex(value_, opts = {}) {
 }
 var hexes, encoder;
 var init_toHex = __esm({
-  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/utils/encoding/toHex.js"() {
+  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/utils/encoding/toHex.js"() {
     init_encoding();
     init_pad();
     init_fromHex();
@@ -831,7 +831,7 @@ var init_toHex = __esm({
   }
 });
 
-// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/utils/encoding/toBytes.js
+// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/utils/encoding/toBytes.js
 function toBytes(value, opts = {}) {
   if (typeof value === "number" || typeof value === "bigint")
     return numberToBytes(value, opts);
@@ -894,7 +894,7 @@ function stringToBytes(value, opts = {}) {
 }
 var encoder2, charCodeMap;
 var init_toBytes = __esm({
-  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/utils/encoding/toBytes.js"() {
+  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/utils/encoding/toBytes.js"() {
     init_base();
     init_isHex();
     init_pad();
@@ -1201,7 +1201,7 @@ var init_sha3 = __esm({
   }
 });
 
-// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/utils/hash/keccak256.js
+// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/utils/hash/keccak256.js
 function keccak256(value, to_) {
   const to = to_ || "hex";
   const bytes = keccak_256(isHex(value, { strict: false }) ? toBytes(value) : value);
@@ -1210,7 +1210,7 @@ function keccak256(value, to_) {
   return toHex(bytes);
 }
 var init_keccak256 = __esm({
-  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/utils/hash/keccak256.js"() {
+  "../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/utils/hash/keccak256.js"() {
     init_sha3();
     init_isHex();
     init_toBytes();
@@ -2835,7 +2835,7 @@ async function __wbg_init(module_or_path) {
 }
 var dkls23_wasm_default = __wbg_init;
 
-// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.22.4/node_modules/viem/_esm/index.js
+// ../../node_modules/.pnpm/viem@2.38.0_bufferutil@4.0.9_typescript@5.9.3_utf-8-validate@5.0.10_zod@3.25.76/node_modules/viem/_esm/index.js
 init_keccak256();
 
 // src/iframe/lib/dkg-manager.ts
@@ -4411,7 +4411,7 @@ var SigningManager = class extends TokenRefreshApiClient {
 };
 
 // src/iframe/main.ts
-var IFRAME_VERSION = "1.17.9";
+var IFRAME_VERSION = "1.17.11";
 var IframeWallet = class {
   constructor() {
     console.log("=".repeat(60));