@web3auth/no-modal/dist/lib.esm/vue/Web3AuthProvider.js

Multi chain wallet aggregator for web3Auth

import { defineComponent, h, shallowRef, ref, watch, provide } from 'vue';
import { Web3AuthNoModal } from '../noModal.js';
import { WalletServicesInnerProvider } from './WalletServicesInnerProvider.js';
import { ANALYTICS_INTEGRATION_TYPE } from '../base/analytics.js';
import { log } from '../base/loglevel.js';
import { CONNECTOR_EVENTS, CONNECTOR_STATUS } from '../base/connector/constants.js';
import { Web3AuthContextKey } from '../base/composables/index.js';
import { WalletInitializationError } from '../base/errors/index.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 chainId = ref(null);
    const chainNamespace = ref(null);
    const isInitializing = ref(false);
    const initError = ref(null);
    const isInitialized = ref(false);
    const isConnected = ref(false);
    const isAuthorized = 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;
        isAuthorized.value = false;
        status.value = null;
        chainId.value = null;
        chainNamespace.value = null;
      };
      onInvalidate(() => {
        if (web3Auth.value) {
          web3Auth.value.cleanup();
        }
      });
      resetHookState();
      const {
        web3AuthOptions
      } = newConfig;
      const web3AuthInstance = new Web3AuthNoModal(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) {
          log.error("Error initializing web3auth", 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) {
          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 authorizedListener = () => {
        status.value = web3Auth.value.status;
        if (web3Auth.value.status === CONNECTOR_STATUS.AUTHORIZED) {
          isAuthorized.value = true;
          isConnected.value = true;
        }
      };
      const disconnectedListener = () => {
        status.value = web3Auth.value.status;
        isConnected.value = false;
        provider.value = null;
        isMFAEnabled.value = false;
        isAuthorized.value = false;
      };
      const connectingListener = () => {
        status.value = web3Auth.value.status;
      };
      const errorListener = () => {
        status.value = web3Auth.value.status;
      };
      const mfaEnabledListener = () => {
        isMFAEnabled.value = true;
      };

      // unregister previous listeners
      if (prevWeb3Auth && newWeb3Auth !== prevWeb3Auth) {
        prevWeb3Auth.removeListener(CONNECTOR_EVENTS.NOT_READY, notReadyListener);
        prevWeb3Auth.removeListener(CONNECTOR_EVENTS.READY, readyListener);
        prevWeb3Auth.removeListener(CONNECTOR_EVENTS.CONNECTED, connectedListener);
        prevWeb3Auth.removeListener(CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
        prevWeb3Auth.removeListener(CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
        prevWeb3Auth.removeListener(CONNECTOR_EVENTS.CONNECTING, connectingListener);
        prevWeb3Auth.removeListener(CONNECTOR_EVENTS.ERRORED, errorListener);
        prevWeb3Auth.removeListener(CONNECTOR_EVENTS.REHYDRATION_ERROR, errorListener);
        prevWeb3Auth.removeListener(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.AUTHORIZED, authorizedListener);
        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
    });

    // 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,
      isInitialized,
      provider,
      status,
      isInitializing,
      initError,
      isMFAEnabled,
      chainId,
      chainNamespace,
      getPlugin,
      setIsMFAEnabled,
      isAuthorized
    });
  },
  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 };