@web3auth/modal 10.13.1 → 10.14.0

package/dist/lib.cjs/packages/modal/src/config.js

@@ -2,7 +2,7 @@
 
 var noModal = require('@web3auth/no-modal');
 
-const version = "10.13.1";
+const version = "10.14.0";
 const defaultConnectorsModalConfig = {
   hideWalletDiscovery: false,
   connectors: {

package/dist/lib.cjs/packages/modal/src/ui/components/Root/Root.js

@@ -321,11 +321,11 @@ function Root(props) {
     }
     // Wallet Details Screen
     if (isWalletDetailsExpanded) {
-      return isPrivacyPolicyOrTncLink ? "640px" : "588px";
+      return isPrivacyPolicyOrTncLink ? "680px" : "628px";
     }
     // MetaMask QR Code Screen
     if ((_bodyState$metamaskQr = bodyState.metamaskQrCode) !== null && _bodyState$metamaskQr !== void 0 && _bodyState$metamaskQr.show) {
-      return isPrivacyPolicyOrTncLink ? "640px" : "588px";
+      return isPrivacyPolicyOrTncLink ? "680px" : "628px";
     }
     // Connect Wallet Screen
     if (modalState.currentPage === constants.PAGES.CONNECT_WALLET) {

package/dist/lib.cjs/packages/modal/src/vue/Web3AuthProvider.js

@@ -19,6 +19,8 @@ const Web3AuthProvider = vue.defineComponent({
     const isMFAEnabled = vue.ref(false);
     const status = vue.ref(null);
     const isAuthorized = vue.ref(false);
+    const chainId = vue.ref(null);
+    const chainNamespace = vue.ref(null);
     const isInitializing = vue.ref(false);
     const initError = vue.ref(null);
     const isInitialized = vue.ref(false);
@@ -37,6 +39,8 @@ const Web3AuthProvider = vue.defineComponent({
         isConnected.value = false;
         isAuthorized.value = false;
         status.value = null;
+        chainId.value = null;
+        chainNamespace.value = null;
       };
       onInvalidate(() => {
         if (web3Auth.value) {
@@ -90,9 +94,12 @@ const Web3AuthProvider = vue.defineComponent({
         status.value = web3Auth.value.status;
         // we do this because of rehydration issues. status connected is fired first but web3auth sdk is not ready yet.
         if (web3Auth.value.status === noModal.CONNECTOR_STATUS.CONNECTED) {
+          var _web3Auth$value$curre, _web3Auth$value$curre2;
           if (!isInitialized.value) isInitialized.value = true;
           isConnected.value = true;
           provider.value = newWeb3Auth.provider;
+          chainId.value = web3Auth.value.currentChainId;
+          chainNamespace.value = (_web3Auth$value$curre = (_web3Auth$value$curre2 = web3Auth.value.currentChain) === null || _web3Auth$value$curre2 === void 0 ? void 0 : _web3Auth$value$curre2.chainNamespace) !== null && _web3Auth$value$curre !== void 0 ? _web3Auth$value$curre : null;
         }
       };
       const disconnectedListener = () => {
@@ -146,6 +153,23 @@ const Web3AuthProvider = vue.defineComponent({
     }, {
       immediate: true
     });
+    // Listen for chain changes on the provider
+    vue.watch(provider, (newProvider, prevProvider) => {
+      const handleChainChange = newChainId => {
+        var _web3Auth$value$curre3, _web3Auth$value;
+        chainId.value = newChainId;
+        chainNamespace.value = (_web3Auth$value$curre3 = (_web3Auth$value = web3Auth.value) === null || _web3Auth$value === void 0 || (_web3Auth$value = _web3Auth$value.currentChain) === null || _web3Auth$value === void 0 ? void 0 : _web3Auth$value.chainNamespace) !== null && _web3Auth$value$curre3 !== void 0 ? _web3Auth$value$curre3 : null;
+      };
+      // unregister previous listener
+      if (prevProvider && newProvider !== prevProvider) {
+        prevProvider.removeListener("chainChanged", handleChainChange);
+      }
+      if (newProvider && newProvider !== prevProvider) {
+        newProvider.on("chainChanged", handleChainChange);
+      }
+    }, {
+      immediate: true
+    });
     vue.provide(noModal.Web3AuthContextKey, {
       web3Auth,
       isConnected,
@@ -156,6 +180,8 @@ const Web3AuthProvider = vue.defineComponent({
       isInitializing,
       initError,
       isMFAEnabled,
+      chainId,
+      chainNamespace,
       getPlugin,
       setIsMFAEnabled
     });

package/dist/lib.cjs/packages/modal/src/vue/composables/useChain.js

@@ -1,23 +1,12 @@
 'use strict';
 
-var vue = require('vue');
 var useWeb3AuthInner = require('./useWeb3AuthInner.js');
 
 const useChain = () => {
   const context = useWeb3AuthInner.useWeb3AuthInner();
-  const chainId = vue.computed(() => {
-    var _context$web3Auth$val;
-    if (!((_context$web3Auth$val = context.web3Auth.value) !== null && _context$web3Auth$val !== void 0 && _context$web3Auth$val.currentChain)) return null;
-    return context.web3Auth.value.currentChain.chainId;
-  });
-  const chainNamespace = vue.computed(() => {
-    var _context$web3Auth$val2;
-    if (!((_context$web3Auth$val2 = context.web3Auth.value) !== null && _context$web3Auth$val2 !== void 0 && _context$web3Auth$val2.currentChain)) return null;
-    return context.web3Auth.value.currentChain.chainNamespace;
-  });
   return {
-    chainId,
-    chainNamespace
+    chainId: context.chainId,
+    chainNamespace: context.chainNamespace
   };
 };
 

package/dist/lib.cjs/types/vue/composables/useChain.d.ts

@@ -1,7 +1,7 @@
 import { ChainNamespaceType } from "@web3auth/no-modal";
-import { ComputedRef } from "vue";
+import { Ref } from "vue";
 export type IUseChain = {
-    chainId: ComputedRef<string | null>;
-    chainNamespace: ComputedRef<ChainNamespaceType | null>;
+    chainId: Ref<string | null>;
+    chainNamespace: Ref<ChainNamespaceType | null>;
 };
 export declare const useChain: () => IUseChain;

package/dist/lib.cjs/types/vue/interfaces.d.ts

@@ -1,4 +1,4 @@
-import type { CONNECTOR_STATUS_TYPE, IPlugin, IProvider, WalletServicesPluginType } from "@web3auth/no-modal";
+import type { ChainNamespaceType, CONNECTOR_STATUS_TYPE, IPlugin, IProvider, WalletServicesPluginType } from "@web3auth/no-modal";
 import { Ref, ShallowRef } from "vue";
 import type { Web3Auth, Web3AuthOptions } from "../modalManager";
 export type Web3AuthContextConfig = {
@@ -16,6 +16,8 @@ interface IBaseWeb3AuthComposableContext {
     isInitialized: Ref<boolean>;
     status: Ref<CONNECTOR_STATUS_TYPE | null>;
     isMFAEnabled: Ref<boolean>;
+    chainId: Ref<string | null>;
+    chainNamespace: Ref<ChainNamespaceType | null>;
     getPlugin: (pluginName: string) => IPlugin | null;
     setIsMFAEnabled: (isMfaEnabled: boolean) => void;
 }

package/dist/lib.esm/packages/modal/src/config.js

@@ -1,6 +1,6 @@
 import { EVM_CONNECTORS } from '@web3auth/no-modal';
 
-const version = "10.13.1";
+const version = "10.14.0";
 const defaultConnectorsModalConfig = {
   hideWalletDiscovery: false,
   connectors: {

package/dist/lib.esm/packages/modal/src/ui/components/Root/Root.js

@@ -327,12 +327,12 @@ function Root(props) {
 
     // Wallet Details Screen
     if (isWalletDetailsExpanded) {
-      return isPrivacyPolicyOrTncLink ? "640px" : "588px";
+      return isPrivacyPolicyOrTncLink ? "680px" : "628px";
     }
 
     // MetaMask QR Code Screen
     if ((_bodyState$metamaskQr = bodyState.metamaskQrCode) !== null && _bodyState$metamaskQr !== void 0 && _bodyState$metamaskQr.show) {
-      return isPrivacyPolicyOrTncLink ? "640px" : "588px";
+      return isPrivacyPolicyOrTncLink ? "680px" : "628px";
     }
 
     // Connect Wallet Screen

package/dist/lib.esm/packages/modal/src/vue/Web3AuthProvider.js

@@ -17,6 +17,8 @@ const Web3AuthProvider = defineComponent({
     const isMFAEnabled = ref(false);
     const status = ref(null);
     const isAuthorized = ref(false);
+    const chainId = ref(null);
+    const chainNamespace = ref(null);
     const isInitializing = ref(false);
     const initError = ref(null);
     const isInitialized = ref(false);
@@ -35,6 +37,8 @@ const Web3AuthProvider = defineComponent({
         isConnected.value = false;
         isAuthorized.value = false;
         status.value = null;
+        chainId.value = null;
+        chainNamespace.value = null;
       };
       onInvalidate(() => {
         if (web3Auth.value) {
@@ -89,9 +93,12 @@ const Web3AuthProvider = defineComponent({
         status.value = web3Auth.value.status;
         // we do this because of rehydration issues. status connected is fired first but web3auth sdk is not ready yet.
         if (web3Auth.value.status === CONNECTOR_STATUS.CONNECTED) {
+          var _currentChain$chainNa, _currentChain;
           if (!isInitialized.value) isInitialized.value = true;
           isConnected.value = true;
           provider.value = newWeb3Auth.provider;
+          chainId.value = web3Auth.value.currentChainId;
+          chainNamespace.value = (_currentChain$chainNa = (_currentChain = web3Auth.value.currentChain) === null || _currentChain === void 0 ? void 0 : _currentChain.chainNamespace) !== null && _currentChain$chainNa !== void 0 ? _currentChain$chainNa : null;
         }
       };
       const disconnectedListener = () => {
@@ -146,6 +153,25 @@ const Web3AuthProvider = defineComponent({
     }, {
       immediate: true
     });
+
+    // Listen for chain changes on the provider
+    watch(provider, (newProvider, prevProvider) => {
+      const handleChainChange = newChainId => {
+        var _web3Auth$value$curre, _web3Auth$value;
+        chainId.value = newChainId;
+        chainNamespace.value = (_web3Auth$value$curre = (_web3Auth$value = web3Auth.value) === null || _web3Auth$value === void 0 || (_web3Auth$value = _web3Auth$value.currentChain) === null || _web3Auth$value === void 0 ? void 0 : _web3Auth$value.chainNamespace) !== null && _web3Auth$value$curre !== void 0 ? _web3Auth$value$curre : null;
+      };
+
+      // unregister previous listener
+      if (prevProvider && newProvider !== prevProvider) {
+        prevProvider.removeListener("chainChanged", handleChainChange);
+      }
+      if (newProvider && newProvider !== prevProvider) {
+        newProvider.on("chainChanged", handleChainChange);
+      }
+    }, {
+      immediate: true
+    });
     provide(Web3AuthContextKey, {
       web3Auth,
       isConnected,
@@ -156,6 +182,8 @@ const Web3AuthProvider = defineComponent({
       isInitializing,
       initError,
       isMFAEnabled,
+      chainId,
+      chainNamespace,
       getPlugin,
       setIsMFAEnabled
     });

package/dist/lib.esm/packages/modal/src/vue/composables/useChain.js

@@ -1,21 +1,10 @@
-import { computed } from 'vue';
 import { useWeb3AuthInner } from './useWeb3AuthInner.js';
 
 const useChain = () => {
   const context = useWeb3AuthInner();
-  const chainId = computed(() => {
-    var _context$web3Auth$val;
-    if (!((_context$web3Auth$val = context.web3Auth.value) !== null && _context$web3Auth$val !== void 0 && _context$web3Auth$val.currentChain)) return null;
-    return context.web3Auth.value.currentChain.chainId;
-  });
-  const chainNamespace = computed(() => {
-    var _context$web3Auth$val2;
-    if (!((_context$web3Auth$val2 = context.web3Auth.value) !== null && _context$web3Auth$val2 !== void 0 && _context$web3Auth$val2.currentChain)) return null;
-    return context.web3Auth.value.currentChain.chainNamespace;
-  });
   return {
-    chainId,
-    chainNamespace
+    chainId: context.chainId,
+    chainNamespace: context.chainNamespace
   };
 };