@web3auth/no-modal
Version:
Multi chain wallet aggregator for web3Auth
231 lines (228 loc) • 10.6 kB
JavaScript
import { shallowRef, ref, watch } from 'vue';
import { ANALYTICS_INTEGRATION_TYPE } from '../base/analytics.js';
import { log } from '../base/loglevel.js';
import { LOGIN_MODE } from '../base/constants.js';
import { WalletInitializationError } from '../base/errors/index.js';
import { CONNECTOR_EVENTS, CONNECTOR_STATUS } from '../base/connector/constants.js';
function useWeb3AuthInnerContextValue({
Web3AuthConstructor,
watchSource,
getWeb3AuthOptions,
initialState,
createConnectionRef = () => ref(null)
}) {
const web3Auth = shallowRef(null);
const connection = createConnectionRef();
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(watchSource, (newSource, _, onInvalidate) => {
const resetHookState = () => {
connection.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 web3AuthInstance = new Web3AuthConstructor(getWeb3AuthOptions(newSource), initialState);
web3AuthInstance.setAnalyticsProperties({
integration_type: ANALYTICS_INTEGRATION_TYPE.VUE_COMPOSABLES
});
web3Auth.value = web3AuthInstance;
}, {
immediate: true
});
watch(web3Auth, async (newWeb3Auth, _, onInvalidate) => {
const controller = new AbortController();
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 = data => {
if (data.pendingUserConsent) return;
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;
connection.value = web3Auth.value.connection;
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;
// on rehydration, `AUTHORIZED` event can be fired first in `CONNECT_AND_SIGN` mode, before `CONNECTED` event.
// Update the connection state here, so that clients can use the connection state immediately.
if (web3Auth.value.status === CONNECTOR_STATUS.AUTHORIZED) {
var _currentChain$chainNa2, _currentChain2;
if (!isInitialized.value) isInitialized.value = true;
isAuthorized.value = true;
isConnected.value = true;
connection.value = web3Auth.value.connection;
chainId.value = web3Auth.value.currentChainId;
chainNamespace.value = (_currentChain$chainNa2 = (_currentChain2 = web3Auth.value.currentChain) === null || _currentChain2 === void 0 ? void 0 : _currentChain2.chainNamespace) !== null && _currentChain$chainNa2 !== void 0 ? _currentChain$chainNa2 : null;
}
};
const consentAcceptedListener = () => {
status.value = web3Auth.value.status;
if (web3Auth.value.status === CONNECTOR_STATUS.CONNECTED || web3Auth.value.status === CONNECTOR_STATUS.AUTHORIZED) {
var _currentChain$chainNa3, _currentChain3;
if (!isInitialized.value) isInitialized.value = true;
isConnected.value = true;
connection.value = web3Auth.value.connection;
chainId.value = web3Auth.value.currentChainId;
chainNamespace.value = (_currentChain$chainNa3 = (_currentChain3 = web3Auth.value.currentChain) === null || _currentChain3 === void 0 ? void 0 : _currentChain3.chainNamespace) !== null && _currentChain$chainNa3 !== void 0 ? _currentChain$chainNa3 : null;
if (web3Auth.value.status === CONNECTOR_STATUS.AUTHORIZED) {
isAuthorized.value = true;
}
}
};
const disconnectedListener = () => {
status.value = web3Auth.value.status;
isConnected.value = false;
connection.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;
};
const connectionUpdatedListener = () => {
var _currentChain$chainNa4, _currentChain4;
status.value = web3Auth.value.status;
connection.value = web3Auth.value.connection;
chainId.value = web3Auth.value.currentChainId;
chainNamespace.value = (_currentChain$chainNa4 = (_currentChain4 = web3Auth.value.currentChain) === null || _currentChain4 === void 0 ? void 0 : _currentChain4.chainNamespace) !== null && _currentChain$chainNa4 !== void 0 ? _currentChain$chainNa4 : null;
};
const connectorDataUpdatedListener = data => {
const updatedData = data.data;
if (updatedData.chainId && chainId.value !== updatedData.chainId) {
var _currentChain5;
chainId.value = updatedData.chainId;
chainNamespace.value = (_currentChain5 = web3Auth.value.currentChain) === null || _currentChain5 === void 0 ? void 0 : _currentChain5.chainNamespace;
}
};
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);
prevWeb3Auth.removeListener(CONNECTOR_EVENTS.CONNECTION_UPDATED, connectionUpdatedListener);
prevWeb3Auth.removeListener(CONNECTOR_EVENTS.CONNECTOR_DATA_UPDATED, connectorDataUpdatedListener);
if (prevWeb3Auth.loginMode === LOGIN_MODE.MODAL) {
prevWeb3Auth.removeListener(CONNECTOR_EVENTS.CONSENT_ACCEPTED, consentAcceptedListener);
}
}
if (newWeb3Auth && newWeb3Auth !== prevWeb3Auth) {
status.value = newWeb3Auth.status;
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);
newWeb3Auth.on(CONNECTOR_EVENTS.CONNECTION_UPDATED, connectionUpdatedListener);
newWeb3Auth.on(CONNECTOR_EVENTS.CONNECTOR_DATA_UPDATED, connectorDataUpdatedListener);
if (newWeb3Auth.loginMode === LOGIN_MODE.MODAL) {
newWeb3Auth.on(CONNECTOR_EVENTS.CONSENT_ACCEPTED, consentAcceptedListener);
}
}
}, {
immediate: true
});
watch(connection, (newConnection, prevConnection) => {
var _prevConnection$ether, _newConnection$ethere;
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;
};
const prevProvider = (_prevConnection$ether = prevConnection === null || prevConnection === void 0 ? void 0 : prevConnection.ethereumProvider) !== null && _prevConnection$ether !== void 0 ? _prevConnection$ether : null;
const newProvider = (_newConnection$ethere = newConnection === null || newConnection === void 0 ? void 0 : newConnection.ethereumProvider) !== null && _newConnection$ethere !== void 0 ? _newConnection$ethere : null;
if (prevProvider && newProvider !== prevProvider) {
prevProvider.removeListener("chainChanged", handleChainChange);
}
if (newProvider && newProvider !== prevProvider) {
newProvider.on("chainChanged", handleChainChange);
}
}, {
immediate: true
});
return {
web3Auth,
isConnected,
isAuthorized,
connection,
isInitializing,
initError,
isInitialized,
status,
isMFAEnabled,
chainId,
chainNamespace,
getPlugin,
setIsMFAEnabled
};
}
export { useWeb3AuthInnerContextValue };