@web3auth/modal/dist/lib.cjs/packages/modal/src/vue/Web3AuthProvider.js

Multi chain wallet aggregator for web3Auth

'use strict';

var noModal = require('@web3auth/no-modal');
var vue = require('vue');
var modalManager = require('../modalManager.js');
var WalletServicesInnerProvider = require('./WalletServicesInnerProvider.js');

const Web3AuthProvider = vue.defineComponent({
  name: "Web3AuthProvider",
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const web3Auth = vue.shallowRef(null);
    const provider = vue.ref(null);
    const isMFAEnabled = vue.ref(false);
    const status = vue.ref(null);
    const isInitializing = vue.ref(false);
    const initError = vue.ref(null);
    const isInitialized = vue.ref(false);
    const isConnected = vue.ref(false);
    const getPlugin = name => {
      if (!web3Auth.value) throw noModal.WalletInitializationError.notReady();
      return web3Auth.value.getPlugin(name);
    };
    const setIsMFAEnabled = isMfaEnabled => {
      isMFAEnabled.value = isMfaEnabled;
    };
    vue.watch(() => props.config, (newConfig, _, onInvalidate) => {
      const resetHookState = () => {
        provider.value = null;
        isMFAEnabled.value = false;
        isConnected.value = false;
        status.value = null;
      };
      onInvalidate(() => {
        if (web3Auth.value) {
          web3Auth.value.cleanup();
        }
      });
      resetHookState();
      const {
        web3AuthOptions
      } = newConfig;
      const web3AuthInstance = new modalManager.Web3Auth(web3AuthOptions);
      web3AuthInstance.setAnalyticsProperties({
        integration_type: noModal.ANALYTICS_INTEGRATION_TYPE.VUE_COMPOSABLES
      });
      web3Auth.value = web3AuthInstance;
    }, {
      immediate: true
    });
    vue.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.init({
            signal: controller.signal
          });
        } catch (error) {
          initError.value = error;
        } finally {
          isInitializing.value = false;
        }
      }
    }, {
      immediate: true
    });
    vue.watch(web3Auth, (newWeb3Auth, prevWeb3Auth) => {
      const notReadyListener = () => {
        status.value = web3Auth.value.status;
      };
      const readyListener = () => {
        status.value = web3Auth.value.status;
        isInitialized.value = true;
      };
      const connectedListener = () => {
        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) {
          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 = web3Auth.value.status;
        if (isConnected.value) {
          isConnected.value = false;
          provider.value = null;
        }
      };
      const mfaEnabledListener = () => {
        isMFAEnabled.value = true;
      };
      // unregister previous listeners
      if (prevWeb3Auth && newWeb3Auth !== prevWeb3Auth) {
        prevWeb3Auth.off(noModal.CONNECTOR_EVENTS.NOT_READY, notReadyListener);
        prevWeb3Auth.off(noModal.CONNECTOR_EVENTS.READY, readyListener);
        prevWeb3Auth.off(noModal.CONNECTOR_EVENTS.CONNECTED, connectedListener);
        prevWeb3Auth.off(noModal.CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
        prevWeb3Auth.off(noModal.CONNECTOR_EVENTS.CONNECTING, connectingListener);
        prevWeb3Auth.off(noModal.CONNECTOR_EVENTS.ERRORED, errorListener);
        prevWeb3Auth.off(noModal.CONNECTOR_EVENTS.REHYDRATION_ERROR, errorListener);
        prevWeb3Auth.off(noModal.CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
      }
      if (newWeb3Auth && newWeb3Auth !== prevWeb3Auth) {
        status.value = newWeb3Auth.status;
        // web3Auth is initialized here.
        newWeb3Auth.on(noModal.CONNECTOR_EVENTS.NOT_READY, notReadyListener);
        newWeb3Auth.on(noModal.CONNECTOR_EVENTS.READY, readyListener);
        newWeb3Auth.on(noModal.CONNECTOR_EVENTS.CONNECTED, connectedListener);
        newWeb3Auth.on(noModal.CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
        newWeb3Auth.on(noModal.CONNECTOR_EVENTS.CONNECTING, connectingListener);
        newWeb3Auth.on(noModal.CONNECTOR_EVENTS.ERRORED, errorListener);
        newWeb3Auth.on(noModal.CONNECTOR_EVENTS.REHYDRATION_ERROR, errorListener);
        newWeb3Auth.on(noModal.CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
      }
    }, {
      immediate: true
    });
    vue.provide(noModal.Web3AuthContextKey, {
      web3Auth,
      isConnected,
      isInitialized,
      provider,
      status,
      isInitializing,
      initError,
      isMFAEnabled,
      getPlugin,
      setIsMFAEnabled
    });
  },
  render() {
    var _this$$slots$default;
    return vue.h(WalletServicesInnerProvider.WalletServicesInnerProvider, {}, (_this$$slots$default = this.$slots.default) !== null && _this$$slots$default !== void 0 ? _this$$slots$default : "");
  }
});

exports.Web3AuthProvider = Web3AuthProvider;