@web3auth/modal 10.0.0-beta.0 → 10.0.0-beta.11

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

@@ -1,6 +1,7 @@
-import { CONNECTOR_EVENTS, Web3AuthContextKey, CONNECTOR_STATUS, WalletInitializationError, WalletLoginError } from '@web3auth/no-modal';
+import { CONNECTOR_EVENTS, Web3AuthContextKey, CONNECTOR_STATUS, WalletInitializationError } from '@web3auth/no-modal';
 import { defineComponent, h, shallowRef, ref, watch, provide } from 'vue';
 import { Web3Auth } from '../modalManager.js';
+import { WalletServicesInnerProvider } from './WalletServicesInnerProvider.js';
 
 const Web3AuthProvider = defineComponent({
   name: "Web3AuthProvider",
@@ -13,69 +14,31 @@ const Web3AuthProvider = defineComponent({
   setup(props) {
     const web3Auth = shallowRef(null);
     const provider = ref(null);
-    const userInfo = ref(null);
     const isMFAEnabled = ref(false);
     const status = ref(null);
     const isInitializing = ref(false);
     const initError = ref(null);
     const isInitialized = ref(false);
-    const isConnecting = ref(false);
-    const connectError = ref(null);
     const isConnected = ref(false);
     const getPlugin = name => {
       if (!web3Auth.value) throw WalletInitializationError.notReady();
       return web3Auth.value.getPlugin(name);
     };
-    const enableMFA = async loginParams => {
-      if (!web3Auth.value) throw WalletInitializationError.notReady();
-      if (!isConnected.value) throw WalletLoginError.notConnectedError();
-      await web3Auth.value.enableMFA(loginParams);
-      const localUserInfo = await web3Auth.value.getUserInfo();
-      userInfo.value = localUserInfo;
-      isMFAEnabled.value = localUserInfo.isMfaEnabled || false;
-    };
-    const manageMFA = async loginParams => {
-      if (!web3Auth.value) throw WalletInitializationError.notReady();
-      if (!isConnected.value) throw WalletLoginError.notConnectedError();
-      await web3Auth.value.manageMFA(loginParams);
-    };
-    const logout = async (logoutParams = {
-      cleanup: false
-    }) => {
-      if (!web3Auth.value) throw WalletInitializationError.notReady();
-      if (!isConnected.value) throw WalletLoginError.notConnectedError();
-      await web3Auth.value.logout(logoutParams);
-    };
-    const connect = async () => {
-      if (!web3Auth.value) throw WalletInitializationError.notReady();
-      try {
-        connectError.value = null;
-        isConnecting.value = true;
-        const localProvider = await web3Auth.value.connect();
-        return localProvider;
-      } catch (error) {
-        connectError.value = error;
-        return null;
-      } finally {
-        isConnecting.value = false;
-      }
-    };
-    const authenticateUser = async () => {
-      if (!web3Auth.value) throw WalletInitializationError.notReady();
-      return web3Auth.value.authenticateUser();
+    const setIsMFAEnabled = isMfaEnabled => {
+      isMFAEnabled.value = isMfaEnabled;
     };
-    const switchChain = chainParams => {
-      if (!web3Auth.value) throw WalletInitializationError.notReady();
-      return web3Auth.value.switchChain(chainParams);
-    };
-    watch(() => props.config, newConfig => {
+    watch(() => props.config, (newConfig, _, onInvalidate) => {
       const resetHookState = () => {
         provider.value = null;
-        userInfo.value = null;
         isMFAEnabled.value = false;
         isConnected.value = false;
         status.value = null;
       };
+      onInvalidate(() => {
+        if (web3Auth.value) {
+          web3Auth.value.cleanup();
+        }
+      });
       resetHookState();
       const {
         web3AuthOptions
@@ -85,12 +48,20 @@ const Web3AuthProvider = defineComponent({
     }, {
       immediate: true
     });
-    watch(web3Auth, async newWeb3Auth => {
+    watch(web3Auth, async (newWeb3Auth, _, onInvalidate) => {
+      const controller = new AbortController();
+
+      // Invalidate the controller here before calling any async methods.
+      onInvalidate(() => {
+        controller.abort();
+      });
       if (newWeb3Auth) {
         try {
           initError.value = null;
           isInitializing.value = true;
-          await newWeb3Auth.initModal();
+          await newWeb3Auth.init({
+            signal: controller.signal
+          });
         } catch (error) {
           initError.value = error;
         } finally {
@@ -100,22 +71,6 @@ const Web3AuthProvider = defineComponent({
     }, {
       immediate: true
     });
-    watch(isConnected, newIsConnected => {
-      if (web3Auth.value) {
-        const addState = async web3AuthInstance => {
-          provider.value = web3AuthInstance.provider;
-          const userState = await web3AuthInstance.getUserInfo();
-          userInfo.value = userState;
-          isMFAEnabled.value = (userState === null || userState === void 0 ? void 0 : userState.isMfaEnabled) || false;
-        };
-        const resetState = () => {
-          provider.value = null;
-          userInfo.value = null;
-          isMFAEnabled.value = false;
-        };
-        if (newIsConnected) addState(web3Auth.value);else resetState();
-      }
-    });
     watch(web3Auth, (newWeb3Auth, prevWeb3Auth) => {
       const notReadyListener = () => {
         status.value = web3Auth.value.status;
@@ -128,19 +83,29 @@ 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) {
-          isInitialized.value = true;
+          if (!isInitialized.value) isInitialized.value = true;
           isConnected.value = true;
+          provider.value = newWeb3Auth.provider;
         }
       };
       const disconnectedListener = () => {
         status.value = web3Auth.value.status;
         isConnected.value = false;
+        provider.value = null;
+        isMFAEnabled.value = false;
       };
       const connectingListener = () => {
         status.value = web3Auth.value.status;
       };
       const errorListener = () => {
-        status.value = CONNECTOR_EVENTS.ERRORED;
+        status.value = web3Auth.value.status;
+        if (isConnected.value) {
+          isConnected.value = false;
+          provider.value = null;
+        }
+      };
+      const mfaEnabledListener = () => {
+        isMFAEnabled.value = true;
       };
 
       // unregister previous listeners
@@ -151,6 +116,8 @@ const Web3AuthProvider = defineComponent({
         prevWeb3Auth.off(CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
         prevWeb3Auth.off(CONNECTOR_EVENTS.CONNECTING, connectingListener);
         prevWeb3Auth.off(CONNECTOR_EVENTS.ERRORED, errorListener);
+        prevWeb3Auth.off(CONNECTOR_EVENTS.REHYDRATION_ERROR, errorListener);
+        prevWeb3Auth.off(CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
       }
       if (newWeb3Auth && newWeb3Auth !== prevWeb3Auth) {
         status.value = newWeb3Auth.status;
@@ -161,6 +128,8 @@ const Web3AuthProvider = defineComponent({
         newWeb3Auth.on(CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
         newWeb3Auth.on(CONNECTOR_EVENTS.CONNECTING, connectingListener);
         newWeb3Auth.on(CONNECTOR_EVENTS.ERRORED, errorListener);
+        newWeb3Auth.on(CONNECTOR_EVENTS.REHYDRATION_ERROR, errorListener);
+        newWeb3Auth.on(CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
       }
     }, {
       immediate: true
@@ -170,25 +139,17 @@ const Web3AuthProvider = defineComponent({
       isConnected,
       isInitialized,
       provider,
-      userInfo,
-      isMFAEnabled,
       status,
-      getPlugin,
-      connect,
-      enableMFA,
-      manageMFA,
-      logout,
-      authenticateUser,
-      switchChain,
       isInitializing,
-      isConnecting,
       initError,
-      connectError
+      isMFAEnabled,
+      getPlugin,
+      setIsMFAEnabled
     });
   },
   render() {
     var _this$$slots$default;
-    return h((_this$$slots$default = this.$slots.default) !== null && _this$$slots$default !== void 0 ? _this$$slots$default : "");
+    return h(WalletServicesInnerProvider, {}, (_this$$slots$default = this.$slots.default) !== null && _this$$slots$default !== void 0 ? _this$$slots$default : "");
   }
 });
 

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

@@ -0,0 +1,32 @@
+import { WalletServicesPluginError } from '@web3auth/no-modal';
+import { ref } from 'vue';
+import { useWalletServicesPlugin } from './useWalletServicesPlugin.js';
+
+const useCheckout = () => {
+  const {
+    plugin,
+    ready
+  } = useWalletServicesPlugin();
+  const loading = ref(false);
+  const error = ref(null);
+  const showCheckout = async showCheckoutParams => {
+    loading.value = true;
+    error.value = null;
+    try {
+      if (!plugin) throw WalletServicesPluginError.notInitialized();
+      if (!ready) throw WalletServicesPluginError.walletPluginNotConnected();
+      await plugin.value.showCheckout(showCheckoutParams);
+    } catch (err) {
+      error.value = err;
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    loading,
+    error,
+    showCheckout
+  };
+};
+
+export { useCheckout };

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

@@ -0,0 +1,30 @@
+import { WalletInitializationError } from '@web3auth/no-modal';
+import { ref } from 'vue';
+import { useWeb3AuthInner } from './useWeb3AuthInner.js';
+
+const useEnableMFA = () => {
+  const {
+    web3Auth
+  } = useWeb3AuthInner();
+  const loading = ref(false);
+  const error = ref(null);
+  const enableMFA = async () => {
+    try {
+      if (!web3Auth.value) throw WalletInitializationError.notReady();
+      error.value = null;
+      loading.value = true;
+      await web3Auth.value.enableMFA();
+    } catch (err) {
+      error.value = err;
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    loading,
+    error,
+    enableMFA
+  };
+};
+
+export { useEnableMFA };

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

@@ -0,0 +1,42 @@
+import { WalletInitializationError } from '@web3auth/no-modal';
+import { ref, watch } from 'vue';
+import { useWeb3AuthInner } from './useWeb3AuthInner.js';
+
+const useIdentityToken = () => {
+  const {
+    web3Auth,
+    isConnected
+  } = useWeb3AuthInner();
+  const loading = ref(false);
+  const error = ref(null);
+  const token = ref(null);
+  const authenticateUser = async () => {
+    try {
+      if (!web3Auth.value) throw WalletInitializationError.notReady();
+      error.value = null;
+      loading.value = true;
+      const result = await web3Auth.value.authenticateUser();
+      if (result !== null && result !== void 0 && result.idToken) {
+        token.value = result.idToken;
+      }
+      return result === null || result === void 0 ? void 0 : result.idToken;
+    } catch (err) {
+      error.value = err;
+    } finally {
+      loading.value = false;
+    }
+  };
+  watch(isConnected, newIsConnected => {
+    if (!newIsConnected && token.value) {
+      token.value = null;
+    }
+  });
+  return {
+    loading,
+    error,
+    token,
+    authenticateUser
+  };
+};
+
+export { useIdentityToken };

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

@@ -0,0 +1,30 @@
+import { WalletInitializationError } from '@web3auth/no-modal';
+import { ref } from 'vue';
+import { useWeb3AuthInner } from './useWeb3AuthInner.js';
+
+const useManageMFA = () => {
+  const {
+    web3Auth
+  } = useWeb3AuthInner();
+  const loading = ref(false);
+  const error = ref(null);
+  const manageMFA = async () => {
+    try {
+      if (!web3Auth.value) throw WalletInitializationError.notReady();
+      error.value = null;
+      loading.value = true;
+      await web3Auth.value.enableMFA();
+    } catch (err) {
+      error.value = err;
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    loading,
+    error,
+    manageMFA
+  };
+};
+
+export { useManageMFA };

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

@@ -0,0 +1,32 @@
+import { WalletServicesPluginError } from '@web3auth/no-modal';
+import { ref } from 'vue';
+import { useWalletServicesPlugin } from './useWalletServicesPlugin.js';
+
+const useSwap = () => {
+  const {
+    plugin,
+    ready
+  } = useWalletServicesPlugin();
+  const loading = ref(false);
+  const error = ref(null);
+  const showSwap = async showSwapParams => {
+    loading.value = true;
+    error.value = null;
+    try {
+      if (!plugin) throw WalletServicesPluginError.notInitialized();
+      if (!ready) throw WalletServicesPluginError.walletPluginNotConnected();
+      await plugin.value.showSwap(showSwapParams);
+    } catch (err) {
+      error.value = err;
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    loading,
+    error,
+    showSwap
+  };
+};
+
+export { useSwap };

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

@@ -0,0 +1,30 @@
+import { WalletInitializationError } from '@web3auth/no-modal';
+import { ref } from 'vue';
+import { useWeb3AuthInner } from './useWeb3AuthInner.js';
+
+const useSwitchChain = () => {
+  const {
+    web3Auth
+  } = useWeb3AuthInner();
+  const loading = ref(false);
+  const error = ref(null);
+  const switchChain = async chainParams => {
+    try {
+      if (!web3Auth.value) throw WalletInitializationError.notReady();
+      error.value = null;
+      loading.value = true;
+      await web3Auth.value.switchChain(chainParams);
+    } catch (err) {
+      error.value = err;
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    loading,
+    error,
+    switchChain
+  };
+};
+
+export { useSwitchChain };

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

@@ -0,0 +1,32 @@
+import { WalletServicesPluginError } from '@web3auth/no-modal';
+import { ref } from 'vue';
+import { useWalletServicesPlugin } from './useWalletServicesPlugin.js';
+
+const useWalletConnectScanner = () => {
+  const {
+    plugin,
+    ready
+  } = useWalletServicesPlugin();
+  const loading = ref(false);
+  const error = ref(null);
+  const showWalletConnectScanner = async showWalletConnectScannerParams => {
+    loading.value = true;
+    error.value = null;
+    try {
+      if (!plugin) throw WalletServicesPluginError.notInitialized();
+      if (!ready) throw WalletServicesPluginError.walletPluginNotConnected();
+      await plugin.value.showWalletConnectScanner(showWalletConnectScannerParams);
+    } catch (err) {
+      error.value = err;
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    loading,
+    error,
+    showWalletConnectScanner
+  };
+};
+
+export { useWalletConnectScanner };

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

@@ -0,0 +1,11 @@
+import { WalletInitializationError } from '@web3auth/no-modal';
+import { WalletServicesContextKey } from '@web3auth/no-modal/vue';
+import { inject } from 'vue';
+
+const useWalletServicesPlugin = () => {
+  const context = inject(WalletServicesContextKey);
+  if (!context) throw WalletInitializationError.fromCode(1000, "usage of useWalletServicesPlugin not wrapped in `WalletServicesContextProvider`.");
+  return context;
+};
+
+export { useWalletServicesPlugin };

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

@@ -0,0 +1,32 @@
+import { WalletServicesPluginError } from '@web3auth/no-modal';
+import { ref } from 'vue';
+import { useWalletServicesPlugin } from './useWalletServicesPlugin.js';
+
+const useWalletUI = () => {
+  const {
+    plugin,
+    ready
+  } = useWalletServicesPlugin();
+  const loading = ref(false);
+  const error = ref(null);
+  const showWalletUI = async showWalletUiParams => {
+    loading.value = true;
+    error.value = null;
+    try {
+      if (!plugin) throw WalletServicesPluginError.notInitialized();
+      if (!ready) throw WalletServicesPluginError.walletPluginNotConnected();
+      await plugin.value.showWalletUi(showWalletUiParams);
+    } catch (err) {
+      error.value = err;
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    loading,
+    error,
+    showWalletUI
+  };
+};
+
+export { useWalletUI };

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

@@ -1,9 +1,7 @@
-import { Web3AuthContextKey, WalletInitializationError } from '@web3auth/no-modal';
-import { inject } from 'vue';
+import { useWeb3AuthInner } from './useWeb3AuthInner.js';
 
 const useWeb3Auth = () => {
-  const context = inject(Web3AuthContextKey);
-  if (!context) throw WalletInitializationError.fromCode(1000, "usage of `useWeb3Auth` not wrapped in `Web3AuthProvider`.");
+  const context = useWeb3AuthInner();
   return context;
 };
 

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

@@ -0,0 +1,64 @@
+import { WalletInitializationError } from '@web3auth/no-modal';
+import { ref, watch } from 'vue';
+import { useWeb3AuthInner } from './useWeb3AuthInner.js';
+
+const useWeb3AuthConnect = () => {
+  const {
+    web3Auth,
+    isConnected
+  } = useWeb3AuthInner();
+  const loading = ref(false);
+  const error = ref(null);
+  const connectorName = ref(null);
+  watch(isConnected, newVal => {
+    if (!newVal && connectorName.value) {
+      connectorName.value = null;
+    }
+    if (newVal && !connectorName.value) {
+      var _web3Auth$value;
+      connectorName.value = (_web3Auth$value = web3Auth.value) === null || _web3Auth$value === void 0 ? void 0 : _web3Auth$value.connectedConnectorName;
+    }
+  }, {
+    immediate: true
+  });
+  const connect = async () => {
+    try {
+      if (!web3Auth.value) throw WalletInitializationError.notReady();
+      error.value = null;
+      loading.value = true;
+      const localProvider = await web3Auth.value.connect();
+      connectorName.value = web3Auth.value.connectedConnectorName;
+      return localProvider;
+    } catch (err) {
+      error.value = err;
+      return null;
+    } finally {
+      loading.value = false;
+    }
+  };
+  const connectTo = async (connectorType, loginParams) => {
+    try {
+      if (!web3Auth.value) throw WalletInitializationError.notReady();
+      error.value = null;
+      loading.value = true;
+      const localProvider = await web3Auth.value.connectTo(connectorType, loginParams);
+      connectorName.value = web3Auth.value.connectedConnectorName;
+      return localProvider;
+    } catch (err) {
+      error.value = err;
+      return null;
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    isConnected,
+    loading,
+    error,
+    connectorName,
+    connect,
+    connectTo
+  };
+};
+
+export { useWeb3AuthConnect };

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

@@ -0,0 +1,30 @@
+import { WalletInitializationError } from '@web3auth/no-modal';
+import { ref } from 'vue';
+import { useWeb3AuthInner } from './useWeb3AuthInner.js';
+
+const useWeb3AuthDisconnect = () => {
+  const {
+    web3Auth
+  } = useWeb3AuthInner();
+  const loading = ref(false);
+  const error = ref(null);
+  const disconnect = async options => {
+    try {
+      if (!web3Auth.value) throw WalletInitializationError.notReady();
+      error.value = null;
+      loading.value = true;
+      await web3Auth.value.logout(options);
+    } catch (err) {
+      error.value = err;
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    loading,
+    error,
+    disconnect
+  };
+};
+
+export { useWeb3AuthDisconnect };

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

@@ -0,0 +1,10 @@
+import { Web3AuthContextKey, WalletInitializationError } from '@web3auth/no-modal';
+import { inject } from 'vue';
+
+const useWeb3AuthInner = () => {
+  const context = inject(Web3AuthContextKey);
+  if (!context) throw WalletInitializationError.fromCode(1000, "usage of `useWeb3Auth` not wrapped in `Web3AuthProvider`.");
+  return context;
+};
+
+export { useWeb3AuthInner };

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

@@ -0,0 +1,51 @@
+import { WalletInitializationError } from '@web3auth/no-modal';
+import { ref, watch } from 'vue';
+import { useWeb3AuthInner } from './useWeb3AuthInner.js';
+
+const useWeb3AuthUser = () => {
+  const {
+    web3Auth,
+    isConnected,
+    isMFAEnabled,
+    setIsMFAEnabled
+  } = useWeb3AuthInner();
+  const loading = ref(false);
+  const error = ref(null);
+  const userInfo = ref(null);
+  const getUserInfo = async () => {
+    try {
+      if (!web3Auth.value) throw WalletInitializationError.notReady();
+      error.value = null;
+      loading.value = true;
+      const result = await web3Auth.value.getUserInfo();
+      userInfo.value = result;
+      return result;
+    } catch (err) {
+      error.value = err;
+    } finally {
+      loading.value = false;
+    }
+  };
+  watch(isConnected, async newIsConnected => {
+    if (newIsConnected && !userInfo.value) {
+      const result = await getUserInfo();
+      userInfo.value = result;
+      setIsMFAEnabled((result === null || result === void 0 ? void 0 : result.isMfaEnabled) || false);
+    }
+    if (!newIsConnected && userInfo.value) {
+      userInfo.value = null;
+      setIsMFAEnabled(false);
+    }
+  }, {
+    immediate: true
+  });
+  return {
+    loading,
+    error,
+    userInfo,
+    isMFAEnabled,
+    getUserInfo
+  };
+};
+
+export { useWeb3AuthUser };

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

@@ -1,2 +1,14 @@
+export { useCheckout } from './composables/useCheckout.js';
+export { useEnableMFA } from './composables/useEnableMFA.js';
+export { useIdentityToken } from './composables/useIdentityToken.js';
+export { useManageMFA } from './composables/useManageMFA.js';
+export { useSwap } from './composables/useSwap.js';
+export { useSwitchChain } from './composables/useSwitchChain.js';
+export { useWalletConnectScanner } from './composables/useWalletConnectScanner.js';
+export { useWalletServicesPlugin } from './composables/useWalletServicesPlugin.js';
+export { useWalletUI } from './composables/useWalletUI.js';
 export { useWeb3Auth } from './composables/useWeb3Auth.js';
+export { useWeb3AuthConnect } from './composables/useWeb3AuthConnect.js';
+export { useWeb3AuthDisconnect } from './composables/useWeb3AuthDisconnect.js';
+export { useWeb3AuthUser } from './composables/useWeb3AuthUser.js';
 export { Web3AuthProvider } from './Web3AuthProvider.js';