@lukso/up-connector 0.7.0 → 0.7.2-dev.d85bba3

package/dist/{wagmi-84MPgN9w.d.cts → index-DZolGZOk.d.cts}

@@ -1,4 +1,10 @@
-import { TemplateResult } from 'lit';
+import * as lit from 'lit';
+import { LitElement, TemplateResult } from 'lit';
+import * as _lukso_core from '@lukso/core';
+
+declare class ConnectModalBase extends LitElement {
+    static styles: lit.CSSResult[];
+}
 
 interface WalletConnector {
     id: string;
@@ -77,13 +83,7 @@ interface WalletDesktop {
     universal?: string;
 }
 
-/**
- * EOA Connection View - Lit Component
- *
- * Displays available EOA (Externally Owned Account) wallets for connection.
- */
-
-declare const EoaConnectionView_base: any;
+declare const EoaConnectionView_base: _lukso_core.ThemeMixinConstructor<_lukso_core.IntlServiceMixinConstructor<_lukso_core.DeviceServiceMixinConstructor<typeof ConnectModalBase>>>;
 declare class EoaConnectionView extends EoaConnectionView_base {
     connectors: WalletConnector[];
     private isConnecting;
@@ -149,13 +149,7 @@ declare global {
     }
 }
 
-/**
- * Connection View - Lit Component
- *
- * Main connection view displaying primary Lukso connectors and option to show EOA connectors.
- */
-
-declare const ConnectionView_base: any;
+declare const ConnectionView_base: _lukso_core.ThemeMixinConstructor<_lukso_core.IntlServiceMixinConstructor<_lukso_core.DeviceServiceMixinConstructor<typeof ConnectModalBase>>>;
 declare class ConnectionView extends ConnectionView_base {
     isConnecting: boolean;
     connectingRdns: string | undefined;
@@ -230,13 +224,7 @@ declare global {
     }
 }
 
-/**
- * QR Code View - Lit Component
- *
- * Displays Wallet Connect QR code for mobile connection.
- */
-
-declare const QrCodeView_base: any;
+declare const QrCodeView_base: _lukso_core.ThemeMixinConstructor<_lukso_core.IntlServiceMixinConstructor<typeof ConnectModalBase>>;
 declare class QrCodeView extends QrCodeView_base {
     data: string | undefined;
     /**
@@ -247,6 +235,7 @@ declare class QrCodeView extends QrCodeView_base {
      * Close modal
      */
     private handleClose;
+    private get qrCodeOptions();
     render(): TemplateResult<1>;
 }
 declare global {
@@ -255,13 +244,7 @@ declare global {
     }
 }
 
-/**
- * Connect Modal - Lit Component
- *
- * Framework-agnostic connection modal for wallet/profile connections.
- */
-
-declare const ConnectModal_base: any;
+declare const ConnectModal_base: _lukso_core.ThemeMixinConstructor<_lukso_core.DeviceServiceMixinConstructor<typeof ConnectModalBase>>;
 declare class ConnectModal extends ConnectModal_base {
     open: boolean;
     private connectors;
@@ -427,4 +410,4 @@ declare function watchConnection(callback: (connection: WagmiConnection) => void
  */
 declare function disconnect(): Promise<boolean>;
 
-export { ConnectModal as C, type WalletConnector as W, type WagmiConnector as a, type ConnectionModalView as b, type ConnectModalSetup as c, type ConnectModalTheme as d, type WagmiConnection as e, disconnect as f, getConnection as g, getWagmiSetup as h, watchConnection as i, fromWagmiConnector as j, fromWagmiConnectors as k, type Wallet as l, setupWagmi as s, wagmiService as w };
+export { ConnectModal as C, type WalletConnector as W, type WagmiConnector as a, type ConnectionModalView as b, type ConnectModalSetup as c, type ConnectModalTheme as d, type WagmiConnection as e, disconnect as f, getConnection as g, getWagmiSetup as h, watchConnection as i, fromWagmiConnector as j, fromWagmiConnectors as k, ConnectModalBase as l, type Wallet as m, setupWagmi as s, wagmiService as w };

package/dist/{wagmi-84MPgN9w.d.ts → index-DZolGZOk.d.ts}

@@ -1,4 +1,10 @@
-import { TemplateResult } from 'lit';
+import * as lit from 'lit';
+import { LitElement, TemplateResult } from 'lit';
+import * as _lukso_core from '@lukso/core';
+
+declare class ConnectModalBase extends LitElement {
+    static styles: lit.CSSResult[];
+}
 
 interface WalletConnector {
     id: string;
@@ -77,13 +83,7 @@ interface WalletDesktop {
     universal?: string;
 }
 
-/**
- * EOA Connection View - Lit Component
- *
- * Displays available EOA (Externally Owned Account) wallets for connection.
- */
-
-declare const EoaConnectionView_base: any;
+declare const EoaConnectionView_base: _lukso_core.ThemeMixinConstructor<_lukso_core.IntlServiceMixinConstructor<_lukso_core.DeviceServiceMixinConstructor<typeof ConnectModalBase>>>;
 declare class EoaConnectionView extends EoaConnectionView_base {
     connectors: WalletConnector[];
     private isConnecting;
@@ -149,13 +149,7 @@ declare global {
     }
 }
 
-/**
- * Connection View - Lit Component
- *
- * Main connection view displaying primary Lukso connectors and option to show EOA connectors.
- */
-
-declare const ConnectionView_base: any;
+declare const ConnectionView_base: _lukso_core.ThemeMixinConstructor<_lukso_core.IntlServiceMixinConstructor<_lukso_core.DeviceServiceMixinConstructor<typeof ConnectModalBase>>>;
 declare class ConnectionView extends ConnectionView_base {
     isConnecting: boolean;
     connectingRdns: string | undefined;
@@ -230,13 +224,7 @@ declare global {
     }
 }
 
-/**
- * QR Code View - Lit Component
- *
- * Displays Wallet Connect QR code for mobile connection.
- */
-
-declare const QrCodeView_base: any;
+declare const QrCodeView_base: _lukso_core.ThemeMixinConstructor<_lukso_core.IntlServiceMixinConstructor<typeof ConnectModalBase>>;
 declare class QrCodeView extends QrCodeView_base {
     data: string | undefined;
     /**
@@ -247,6 +235,7 @@ declare class QrCodeView extends QrCodeView_base {
      * Close modal
      */
     private handleClose;
+    private get qrCodeOptions();
     render(): TemplateResult<1>;
 }
 declare global {
@@ -255,13 +244,7 @@ declare global {
     }
 }
 
-/**
- * Connect Modal - Lit Component
- *
- * Framework-agnostic connection modal for wallet/profile connections.
- */
-
-declare const ConnectModal_base: any;
+declare const ConnectModal_base: _lukso_core.ThemeMixinConstructor<_lukso_core.DeviceServiceMixinConstructor<typeof ConnectModalBase>>;
 declare class ConnectModal extends ConnectModal_base {
     open: boolean;
     private connectors;
@@ -427,4 +410,4 @@ declare function watchConnection(callback: (connection: WagmiConnection) => void
  */
 declare function disconnect(): Promise<boolean>;
 
-export { ConnectModal as C, type WalletConnector as W, type WagmiConnector as a, type ConnectionModalView as b, type ConnectModalSetup as c, type ConnectModalTheme as d, type WagmiConnection as e, disconnect as f, getConnection as g, getWagmiSetup as h, watchConnection as i, fromWagmiConnector as j, fromWagmiConnectors as k, type Wallet as l, setupWagmi as s, wagmiService as w };
+export { ConnectModal as C, type WalletConnector as W, type WagmiConnector as a, type ConnectionModalView as b, type ConnectModalSetup as c, type ConnectModalTheme as d, type WagmiConnection as e, disconnect as f, getConnection as g, getWagmiSetup as h, watchConnection as i, fromWagmiConnector as j, fromWagmiConnectors as k, ConnectModalBase as l, type Wallet as m, setupWagmi as s, wagmiService as w };

package/dist/index.cjs

@@ -1,24 +1,24 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkMEEN5QJZcjs = require('./chunk-MEEN5QJZ.cjs');
+var _chunk7ASNQ5WCcjs = require('./chunk-7ASNQ5WC.cjs');
 
 
 
 
 
 
-var _chunkU53KATZWcjs = require('./chunk-U53KATZW.cjs');
+var _chunk2K6JGEIEcjs = require('./chunk-2K6JGEIE.cjs');
 
 
 
 var _chunk7LQ5EB2Xcjs = require('./chunk-7LQ5EB2X.cjs');
 
 
-var _chunkUQZN2AKNcjs = require('./chunk-UQZN2AKN.cjs');
+var _chunkDVAH2W74cjs = require('./chunk-DVAH2W74.cjs');
 
 
-var _chunkE34NRQRAcjs = require('./chunk-E34NRQRA.cjs');
-require('./chunk-ZWXGWUXQ.cjs');
+var _chunkEJYS2CGFcjs = require('./chunk-EJYS2CGF.cjs');
+require('./chunk-ILFBSTA2.cjs');
 
 
 
@@ -29,7 +29,7 @@ require('./chunk-ZWXGWUXQ.cjs');
 
 
 
-var _chunk2CKXEZQFcjs = require('./chunk-2CKXEZQF.cjs');
+var _chunkSH4GXMHFcjs = require('./chunk-SH4GXMHF.cjs');
 require('./chunk-ZBDE64SD.cjs');
 
 // src/connector.ts
@@ -87,7 +87,7 @@ var UPConnector = class {
   }
   async startWagmiSync() {
     try {
-      const connection = await _chunk2CKXEZQFcjs.getConnection.call(void 0, );
+      const connection = await _chunkSH4GXMHFcjs.getConnection.call(void 0, );
       if (!connection) {
         return;
       }
@@ -98,7 +98,7 @@ var UPConnector = class {
           connection.chainId
         );
       }
-      this.wagmiUnsubscribe = await _chunk2CKXEZQFcjs.watchConnection.call(void 0, (connection2) => {
+      this.wagmiUnsubscribe = await _chunkSH4GXMHFcjs.watchConnection.call(void 0, (connection2) => {
         const account = {
           isConnected: connection2.status === "connected",
           address: connection2.address,
@@ -211,7 +211,7 @@ var UPConnector = class {
     }
   }
   async handleDisconnection() {
-    await _chunk2CKXEZQFcjs.disconnect.call(void 0, );
+    await _chunkSH4GXMHFcjs.disconnect.call(void 0, );
     this.connectedAddress = void 0;
     this.connectedProvider = void 0;
     this.connectedChainId = void 0;
@@ -796,5 +796,5 @@ var WindowPopupInstance = class extends BasePopupInstance {
 
 
 
-exports.AccountModal = _chunkMEEN5QJZcjs.AccountModal; exports.BackupModal = _chunkUQZN2AKNcjs.BackupModal; exports.ConnectModal = _chunk2CKXEZQFcjs.ConnectModal; exports.DraggableAvatar = _chunk7LQ5EB2Xcjs.DraggableAvatar; exports.EMBEDDED_WALLET_ID = _chunkU53KATZWcjs.EMBEDDED_WALLET_ID; exports.EMBEDDED_WALLET_URL_DEV = _chunkU53KATZWcjs.EMBEDDED_WALLET_URL_DEV; exports.EMBEDDED_WALLET_URL_PROD = _chunkU53KATZWcjs.EMBEDDED_WALLET_URL_PROD; exports.ModalPopupInstance = ModalPopupInstance; exports.RestoreModal = _chunkE34NRQRAcjs.RestoreModal; exports.UPConnector = UPConnector; exports.UP_EXTENSION_ID = _chunkU53KATZWcjs.UP_EXTENSION_ID; exports.WindowPopupInstance = WindowPopupInstance; exports.createAvatar = _chunk7LQ5EB2Xcjs.createAvatar; exports.createConnector = createConnector; exports.default = createConnector; exports.disconnect = _chunk2CKXEZQFcjs.disconnect; exports.fromWagmiConnector = _chunk2CKXEZQFcjs.fromWagmiConnector; exports.fromWagmiConnectors = _chunk2CKXEZQFcjs.fromWagmiConnectors; exports.getConnection = _chunk2CKXEZQFcjs.getConnection; exports.getWagmiSetup = _chunk2CKXEZQFcjs.getWagmiSetup; exports.setupConnectModal = _chunk2CKXEZQFcjs.setupWagmi; exports.setupLuksoConnector = _chunkU53KATZWcjs.setupLuksoConnector; exports.wagmi = _chunk2CKXEZQFcjs.wagmiService; exports.watchConnection = _chunk2CKXEZQFcjs.watchConnection;
+exports.AccountModal = _chunk7ASNQ5WCcjs.AccountModal; exports.BackupModal = _chunkDVAH2W74cjs.BackupModal; exports.ConnectModal = _chunkSH4GXMHFcjs.ConnectModal; exports.DraggableAvatar = _chunk7LQ5EB2Xcjs.DraggableAvatar; exports.EMBEDDED_WALLET_ID = _chunk2K6JGEIEcjs.EMBEDDED_WALLET_ID; exports.EMBEDDED_WALLET_URL_DEV = _chunk2K6JGEIEcjs.EMBEDDED_WALLET_URL_DEV; exports.EMBEDDED_WALLET_URL_PROD = _chunk2K6JGEIEcjs.EMBEDDED_WALLET_URL_PROD; exports.ModalPopupInstance = ModalPopupInstance; exports.RestoreModal = _chunkEJYS2CGFcjs.RestoreModal; exports.UPConnector = UPConnector; exports.UP_EXTENSION_ID = _chunk2K6JGEIEcjs.UP_EXTENSION_ID; exports.WindowPopupInstance = WindowPopupInstance; exports.createAvatar = _chunk7LQ5EB2Xcjs.createAvatar; exports.createConnector = createConnector; exports.default = createConnector; exports.disconnect = _chunkSH4GXMHFcjs.disconnect; exports.fromWagmiConnector = _chunkSH4GXMHFcjs.fromWagmiConnector; exports.fromWagmiConnectors = _chunkSH4GXMHFcjs.fromWagmiConnectors; exports.getConnection = _chunkSH4GXMHFcjs.getConnection; exports.getWagmiSetup = _chunkSH4GXMHFcjs.getWagmiSetup; exports.setupConnectModal = _chunkSH4GXMHFcjs.setupWagmi; exports.setupLuksoConnector = _chunk2K6JGEIEcjs.setupLuksoConnector; exports.wagmi = _chunkSH4GXMHFcjs.wagmiService; exports.watchConnection = _chunkSH4GXMHFcjs.watchConnection;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.cts

@@ -3,13 +3,14 @@ export { EMBEDDED_WALLET_ID, EMBEDDED_WALLET_URL_DEV, EMBEDDED_WALLET_URL_PROD,
 import { C as ConnectorConfig, D as DraggableAvatar, a as ConnectionState } from './avatar-CQkubMTK.cjs';
 export { A as AddressData, b as AvatarOptions, W as WalletProvider, c as createAvatar } from './avatar-CQkubMTK.cjs';
 export { BackupModal } from './backup-modal.cjs';
-import { W as WalletConnector, C as ConnectModal } from './wagmi-84MPgN9w.cjs';
-export { c as ConnectModalSetup, d as ConnectModalTheme, b as ConnectionModalView, e as WagmiConnection, a as WagmiConnector, f as disconnect, j as fromWagmiConnector, k as fromWagmiConnectors, g as getConnection, h as getWagmiSetup, s as setupConnectModal, w as wagmi, i as watchConnection } from './wagmi-84MPgN9w.cjs';
+import { W as WalletConnector, C as ConnectModal } from './index-DZolGZOk.cjs';
+export { c as ConnectModalSetup, d as ConnectModalTheme, b as ConnectionModalView, e as WagmiConnection, a as WagmiConnector, f as disconnect, j as fromWagmiConnector, k as fromWagmiConnectors, g as getConnection, h as getWagmiSetup, s as setupConnectModal, w as wagmi, i as watchConnection } from './index-DZolGZOk.cjs';
 export { RestoreModal } from './restore-modal.cjs';
 import 'lit';
 import './index-D2orHGFi.cjs';
 import '@wagmi/core';
 import '@lukso/passkey-auth';
+import '@lukso/core';
 
 /**
  * Enhanced Popup System for UP Connector

package/dist/index.d.ts

@@ -3,13 +3,14 @@ export { EMBEDDED_WALLET_ID, EMBEDDED_WALLET_URL_DEV, EMBEDDED_WALLET_URL_PROD,
 import { C as ConnectorConfig, D as DraggableAvatar, a as ConnectionState } from './avatar-CQkubMTK.js';
 export { A as AddressData, b as AvatarOptions, W as WalletProvider, c as createAvatar } from './avatar-CQkubMTK.js';
 export { BackupModal } from './backup-modal.js';
-import { W as WalletConnector, C as ConnectModal } from './wagmi-84MPgN9w.js';
-export { c as ConnectModalSetup, d as ConnectModalTheme, b as ConnectionModalView, e as WagmiConnection, a as WagmiConnector, f as disconnect, j as fromWagmiConnector, k as fromWagmiConnectors, g as getConnection, h as getWagmiSetup, s as setupConnectModal, w as wagmi, i as watchConnection } from './wagmi-84MPgN9w.js';
+import { W as WalletConnector, C as ConnectModal } from './index-DZolGZOk.js';
+export { c as ConnectModalSetup, d as ConnectModalTheme, b as ConnectionModalView, e as WagmiConnection, a as WagmiConnector, f as disconnect, j as fromWagmiConnector, k as fromWagmiConnectors, g as getConnection, h as getWagmiSetup, s as setupConnectModal, w as wagmi, i as watchConnection } from './index-DZolGZOk.js';
 export { RestoreModal } from './restore-modal.js';
 import 'lit';
 import './index-D2orHGFi.js';
 import '@wagmi/core';
 import '@lukso/passkey-auth';
+import '@lukso/core';
 
 /**
  * Enhanced Popup System for UP Connector

package/dist/index.js

@@ -1,24 +1,24 @@
 import {
   AccountModal
-} from "./chunk-LIHQISFN.js";
+} from "./chunk-W3EJ2EJN.js";
 import {
   EMBEDDED_WALLET_ID,
   EMBEDDED_WALLET_URL_DEV,
   EMBEDDED_WALLET_URL_PROD,
   UP_EXTENSION_ID,
   setupLuksoConnector
-} from "./chunk-QOAWX2VD.js";
+} from "./chunk-PKYHZ2HN.js";
 import {
   DraggableAvatar,
   createAvatar
 } from "./chunk-GKAVIDXP.js";
 import {
   BackupModal
-} from "./chunk-I5I6SZZ5.js";
+} from "./chunk-OYA2PRQT.js";
 import {
   RestoreModal
-} from "./chunk-RCCGJ3DC.js";
-import "./chunk-UPWE4L5Z.js";
+} from "./chunk-57BU5F5W.js";
+import "./chunk-EL7I4CI6.js";
 import {
   ConnectModal,
   disconnect,
@@ -29,7 +29,7 @@ import {
   setupWagmi,
   wagmiService,
   watchConnection
-} from "./chunk-RO5M7PBL.js";
+} from "./chunk-H4DVQ5E2.js";
 import "./chunk-EUXUH3YW.js";
 
 // src/connector.ts

package/dist/restore-modal.cjs

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkE34NRQRAcjs = require('./chunk-E34NRQRA.cjs');
-require('./chunk-ZWXGWUXQ.cjs');
+var _chunkEJYS2CGFcjs = require('./chunk-EJYS2CGF.cjs');
+require('./chunk-ILFBSTA2.cjs');
 require('./chunk-ZBDE64SD.cjs');
 
 
-exports.RestoreModal = _chunkE34NRQRAcjs.RestoreModal;
+exports.RestoreModal = _chunkEJYS2CGFcjs.RestoreModal;
 //# sourceMappingURL=restore-modal.cjs.map

package/dist/restore-modal.js

@@ -1,7 +1,7 @@
 import {
   RestoreModal
-} from "./chunk-RCCGJ3DC.js";
-import "./chunk-UPWE4L5Z.js";
+} from "./chunk-57BU5F5W.js";
+import "./chunk-EL7I4CI6.js";
 import "./chunk-EUXUH3YW.js";
 export {
   RestoreModal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/up-connector",
-  "version": "0.7.0",
+  "version": "0.7.2-dev.d85bba3",
   "description": "Universal Profile connector with draggable avatar and connection modal",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -77,15 +77,15 @@
   "dependencies": {
     "@lit/task": "^1.0.3",
     "@lukso/up-provider": "0.3.7",
-    "@lukso/web-components": "^1.171.2",
+    "@lukso/web-components": "^1.172.14",
     "debug": "^4.4.3",
     "lit": "^3.3.1",
     "ws": "^8.18.3",
     "zxcvbn": "^4.4.2",
-    "@lukso/core": "1.2.0",
-    "@lukso/passkey-auth": "1.2.1",
-    "@lukso/transaction-view-core": "0.6.0",
-    "@lukso/transaction-view-headless": "0.4.1"
+    "@lukso/core": "1.2.2-dev.d85bba3",
+    "@lukso/transaction-view-core": "0.6.1-dev.d85bba3",
+    "@lukso/transaction-view-headless": "0.4.2-dev.d85bba3",
+    "@lukso/passkey-auth": "1.2.2-dev.d85bba3"
   },
   "peerDependencies": {
     "@wagmi/connectors": "^7.0.0",
@@ -109,14 +109,14 @@
     "@types/zxcvbn": "^4.4.5",
     "@wagmi/connectors": "^7.0.2",
     "@wagmi/core": "^3.0.0",
-    "autoprefixer": "^10.4.22",
+    "autoprefixer": "^10.4.23",
     "postcss": "^8.5.6",
     "postcss-import": "^16.1.1",
-    "tailwindcss": "^3.4.18",
+    "tailwindcss": "^3.4.19",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
-    "viem": "^2.41.2",
-    "vitest": "^4.0.15"
+    "viem": "^2.43.1",
+    "vitest": "^4.0.16"
   },
   "tsup": {
     "entry": [

package/src/connect-modal/components/connection-view.ts

@@ -61,6 +61,9 @@ export class ConnectionView extends withTheme(
    * Get browser extension store info
    */
   private get extensionStore(): BrowserInfo {
+    if (!this.device) {
+      throw new Error('DeviceService not initialized')
+    }
     const info = browserInfo(this.device)
     return info
   }
@@ -177,7 +180,7 @@ export class ConnectionView extends withTheme(
 
             logInfo('Mobile App Deep Link:', deepLink)
 
-            if (this.device.isMobile) {
+            if (this.device?.isMobile) {
               window.open(deepLink, '_blank')
             } else {
               this.handleShowQrCode(deepLink)
@@ -321,7 +324,7 @@ export class ConnectionView extends withTheme(
         this.isConnecting &&
           this.connectingRdns === this.upExtensionConnector?.rdns,
         this.isConnecting ||
-          this.device.isMobile ||
+          this.device?.isMobile ||
           !this.browserSupportExtension
       )
     )

package/src/connect-modal/components/qr-code-view.ts

@@ -11,8 +11,13 @@ import { ConnectModalBase } from '../connect-modal.base'
 // Import lukso web components
 import '@lukso/web-components/dist/components/lukso-qr-code'
 import { withIntlService, withTheme } from '@lukso/core/mixins'
+import type { QRCodeOptions } from '@lukso/web-components'
 import { property } from 'lit/decorators.js'
-import { renderBackButton, renderCloseButton } from '../connect-modal.templates'
+import {
+  renderBackButton,
+  renderCloseButton,
+  renderTitle,
+} from '../connect-modal.templates'
 import cubeGlassImage from '../images/up-cube-glass.png'
 
 export class QrCodeView extends withTheme(withIntlService(ConnectModalBase)) {
@@ -36,6 +41,17 @@ export class QrCodeView extends withTheme(withIntlService(ConnectModalBase)) {
     )
   }
 
+  private get qrCodeOptions(): QRCodeOptions {
+    return {
+      dotsOptions: {
+        color: this.isDark ? '#F5F8FA' : '#243542',
+      },
+      backgroundOptions: {
+        color: this.isDark ? '#243542' : '#FFFFFF',
+      },
+    }
+  }
+
   render(): TemplateResult<1> {
     return html`<div class="flex justify-between">
         <button
@@ -51,13 +67,12 @@ export class QrCodeView extends withTheme(withIntlService(ConnectModalBase)) {
         </button>
       </div>
       <div class="flex flex-col items-center text-center">
-        <div class="heading-inter-21-semi-bold mb-4">
-        ${this.formatMessage('connect_modal_qr_code_title')}
-      </div>
-      <div class="paragraph-inter-16-regular mb-6">
+        ${renderTitle(this.formatMessage('connect_modal_qr_code_title'))}
+
+      <div class="paragraph-inter-16-regular text-neutral-20 dark:text-neutral-100 mb-4">
         ${this.formatMessage('connect_modal_qr_code_description')}
       </div>
-        <lukso-qr-code size="340" .value="${this.data}" image="${cubeGlassImage}"></lukso-qr-code></div>`
+        <lukso-qr-code size="320" .value="${this.data}" image="${cubeGlassImage}" .options="${this.qrCodeOptions}" class="rounded-12 overflow-hidden"></lukso-qr-code></div>`
   }
 }
 

package/src/connect-modal/connect-modal.ts

@@ -206,6 +206,7 @@ export class ConnectModal extends withTheme(
         ?is-open=${this.open}
         ?has-bottom-padding=${!!(this.device?.isIOS && this.device?.isSafari)}
         size="auto"
+        .theme=${this.theme}
         @on-backdrop-click=${this.handleClose}
       >
         <div class="p-6 w-full sm:w-[372px]">