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

Multi chain wallet aggregator for web3Auth

import { ANALYTICS_INTEGRATION_TYPE, 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",
  props: {
    config: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const web3Auth = shallowRef(null);
    const provider = ref(null);
    const isMFAEnabled = ref(false);
    const status = ref(null);
    const isInitializing = ref(false);
    const initError = ref(null);
    const isInitialized = ref(false);
    const isConnected = ref(false);
    const getPlugin = name => {
      if (!web3Auth.value) throw WalletInitializationError.notReady();
      return web3Auth.value.getPlugin(name);
    };
    const setIsMFAEnabled = isMfaEnabled => {
      isMFAEnabled.value = isMfaEnabled;
    };
    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 Web3Auth(web3AuthOptions);
      web3AuthInstance.setAnalyticsProperties({
        integration_type: ANALYTICS_INTEGRATION_TYPE.VUE_COMPOSABLES
      });
      web3Auth.value = web3AuthInstance;
    }, {
      immediate: true
    });
    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
    });
    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 === 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(CONNECTOR_EVENTS.NOT_READY, notReadyListener);
        prevWeb3Auth.off(CONNECTOR_EVENTS.READY, readyListener);
        prevWeb3Auth.off(CONNECTOR_EVENTS.CONNECTED, connectedListener);
        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;
        // web3Auth is initialized here.
        newWeb3Auth.on(CONNECTOR_EVENTS.NOT_READY, notReadyListener);
        newWeb3Auth.on(CONNECTOR_EVENTS.READY, readyListener);
        newWeb3Auth.on(CONNECTOR_EVENTS.CONNECTED, connectedListener);
        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
    });
    provide(Web3AuthContextKey, {
      web3Auth,
      isConnected,
      isInitialized,
      provider,
      status,
      isInitializing,
      initError,
      isMFAEnabled,
      getPlugin,
      setIsMFAEnabled
    });
  },
  render() {
    var _this$$slots$default;
    return h(WalletServicesInnerProvider, {}, (_this$$slots$default = this.$slots.default) !== null && _this$$slots$default !== void 0 ? _this$$slots$default : "");
  }
});

export { Web3AuthProvider };