@web3auth/no-modal
Version:
Multi chain wallet aggregator for web3Auth
230 lines (227 loc) • 11.2 kB
JavaScript
import { useMemo, useState, useCallback, useEffect } from 'react';
import { WalletInitializationError } from '../../base/errors/index.js';
import { LOGIN_MODE } from '../../base/constants.js';
import { ANALYTICS_INTEGRATION_TYPE } from '../../base/analytics.js';
import { CONNECTOR_EVENTS, CONNECTOR_STATUS } from '../../base/connector/constants.js';
import { CONNECTED_STATUSES } from '../../base/connector/connectorStatus.js';
function getInitialState(web3Auth) {
var _web3Auth$currentChai, _web3Auth$currentChai2;
const isConnected = CONNECTED_STATUSES.includes(web3Auth.status);
const isAuthorized = web3Auth.status === CONNECTOR_STATUS.AUTHORIZED;
return {
chainId: isConnected ? web3Auth.currentChainId : null,
chainNamespace: isConnected ? (_web3Auth$currentChai = (_web3Auth$currentChai2 = web3Auth.currentChain) === null || _web3Auth$currentChai2 === void 0 ? void 0 : _web3Auth$currentChai2.chainNamespace) !== null && _web3Auth$currentChai !== void 0 ? _web3Auth$currentChai : null : null,
connection: isConnected ? web3Auth.connection : null,
isAuthorized,
isConnected,
isInitialized: isConnected,
status: web3Auth.status
};
}
function useWeb3AuthInnerContextValue({
Web3AuthConstructor,
web3AuthOptions,
initialState,
notReadyUsesCurrentStatus = false,
cleanupOnUnmount = false,
initEffectDependency
}) {
const web3Auth = useMemo(() => {
return new Web3AuthConstructor(web3AuthOptions, initialState);
}, [Web3AuthConstructor, web3AuthOptions, initialState]);
const initialWeb3AuthState = getInitialState(web3Auth);
const [chainId, setChainId] = useState(() => initialWeb3AuthState.chainId);
const [chainNamespace, setChainNamespace] = useState(() => initialWeb3AuthState.chainNamespace);
const [isInitializing, setIsInitializing] = useState(false);
const [initError, setInitError] = useState(null);
const [connection, setConnection] = useState(() => initialWeb3AuthState.connection);
const [isInitialized, setIsInitialized] = useState(initialWeb3AuthState.isInitialized);
const [isMFAEnabled, setIsMFAEnabled] = useState(false);
const [isConnected, setIsConnected] = useState(initialWeb3AuthState.isConnected);
const [status, setStatus] = useState(initialWeb3AuthState.status);
const [isAuthorized, setIsAuthorized] = useState(initialWeb3AuthState.isAuthorized);
const getPlugin = useCallback(name => {
if (!web3Auth) throw WalletInitializationError.notReady();
return web3Auth.getPlugin(name);
}, [web3Auth]);
useEffect(() => {
const controller = new AbortController();
async function init() {
try {
var _web3Auth$currentChai3;
setInitError(null);
setIsInitializing(true);
web3Auth.setAnalyticsProperties({
integration_type: ANALYTICS_INTEGRATION_TYPE.REACT_HOOKS
});
await web3Auth.init({
signal: controller.signal
});
setChainId(web3Auth.currentChainId);
setChainNamespace((_web3Auth$currentChai3 = web3Auth.currentChain) === null || _web3Auth$currentChai3 === void 0 ? void 0 : _web3Auth$currentChai3.chainNamespace);
} catch (error) {
setInitError(error);
} finally {
setIsInitializing(false);
}
}
init();
return () => {
controller.abort();
};
}, [web3Auth, initEffectDependency]);
useEffect(() => {
var _connection$ethereumP;
const handleChainChange = async nextChainId => {
var _web3Auth$currentChai4;
setChainId(nextChainId);
setChainNamespace((_web3Auth$currentChai4 = web3Auth.currentChain) === null || _web3Auth$currentChai4 === void 0 ? void 0 : _web3Auth$currentChai4.chainNamespace);
};
const provider = (_connection$ethereumP = connection === null || connection === void 0 ? void 0 : connection.ethereumProvider) !== null && _connection$ethereumP !== void 0 ? _connection$ethereumP : null;
if (!provider) return undefined;
provider.on("chainChanged", handleChainChange);
return () => {
provider.removeListener("chainChanged", handleChainChange);
};
}, [web3Auth.currentChain, connection === null || connection === void 0 ? void 0 : connection.ethereumProvider]);
useEffect(() => {
const notReadyListener = () => {
setStatus(notReadyUsesCurrentStatus ? web3Auth.status : CONNECTOR_STATUS.NOT_READY);
};
const readyListener = () => {
setStatus(web3Auth.status);
setIsInitialized(true);
};
const connectedListener = data => {
if (data.pendingUserConsent) return;
setStatus(web3Auth.status);
// we do this because of rehydration issues. status connected is fired first but web3auth sdk is not ready yet.
if (web3Auth.status === CONNECTOR_STATUS.CONNECTED) {
var _web3Auth$currentChai5, _web3Auth$currentChai6;
setIsInitialized(true);
setIsConnected(true);
setConnection(web3Auth.connection);
setChainId(web3Auth.currentChainId);
setChainNamespace((_web3Auth$currentChai5 = (_web3Auth$currentChai6 = web3Auth.currentChain) === null || _web3Auth$currentChai6 === void 0 ? void 0 : _web3Auth$currentChai6.chainNamespace) !== null && _web3Auth$currentChai5 !== void 0 ? _web3Auth$currentChai5 : null);
}
};
const disconnectedListener = () => {
setStatus(web3Auth.status);
setIsConnected(false);
setIsAuthorized(false);
setConnection(null);
};
const connectingListener = () => {
setStatus(web3Auth.status);
};
const errorListener = () => {
setStatus(web3Auth.status);
};
const rehydrationErrorListener = () => {
setStatus(web3Auth.status);
setIsConnected(false);
setIsAuthorized(false);
setConnection(null);
};
const authorizedListener = () => {
setStatus(web3Auth.status);
if (web3Auth.status === CONNECTOR_STATUS.AUTHORIZED) {
var _web3Auth$currentChai7, _web3Auth$currentChai8;
setIsInitialized(true);
setIsConnected(true);
// 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.
setConnection(web3Auth.connection);
setChainId(web3Auth.currentChainId);
setChainNamespace((_web3Auth$currentChai7 = (_web3Auth$currentChai8 = web3Auth.currentChain) === null || _web3Auth$currentChai8 === void 0 ? void 0 : _web3Auth$currentChai8.chainNamespace) !== null && _web3Auth$currentChai7 !== void 0 ? _web3Auth$currentChai7 : null);
setIsAuthorized(true);
}
};
const consentAcceptedListener = () => {
setStatus(web3Auth.status);
if (web3Auth.status === CONNECTOR_STATUS.CONNECTED || web3Auth.status === CONNECTOR_STATUS.AUTHORIZED) {
var _web3Auth$currentChai9, _web3Auth$currentChai0;
setIsInitialized(true);
setIsConnected(true);
setConnection(web3Auth.connection);
setChainId(web3Auth.currentChainId);
setChainNamespace((_web3Auth$currentChai9 = (_web3Auth$currentChai0 = web3Auth.currentChain) === null || _web3Auth$currentChai0 === void 0 ? void 0 : _web3Auth$currentChai0.chainNamespace) !== null && _web3Auth$currentChai9 !== void 0 ? _web3Auth$currentChai9 : null);
if (web3Auth.status === CONNECTOR_STATUS.AUTHORIZED) {
setIsAuthorized(true);
}
}
};
const mfaEnabledListener = nextIsMFAEnabled => {
if (typeof nextIsMFAEnabled === "boolean") setIsMFAEnabled(nextIsMFAEnabled);
};
const connectionUpdatedListener = () => {
var _web3Auth$currentChai1, _web3Auth$currentChai10;
setStatus(web3Auth.status);
setConnection(web3Auth.connection);
setChainId(web3Auth.currentChainId);
setChainNamespace((_web3Auth$currentChai1 = (_web3Auth$currentChai10 = web3Auth.currentChain) === null || _web3Auth$currentChai10 === void 0 ? void 0 : _web3Auth$currentChai10.chainNamespace) !== null && _web3Auth$currentChai1 !== void 0 ? _web3Auth$currentChai1 : null);
};
const connectorDataUpdatedListener = data => {
const updatedData = data.data;
if (updatedData.chainId) {
var _web3Auth$currentChai11;
setChainId(updatedData.chainId);
setChainNamespace((_web3Auth$currentChai11 = web3Auth.currentChain) === null || _web3Auth$currentChai11 === void 0 ? void 0 : _web3Auth$currentChai11.chainNamespace);
}
};
if (web3Auth) {
web3Auth.on(CONNECTOR_EVENTS.NOT_READY, notReadyListener);
web3Auth.on(CONNECTOR_EVENTS.READY, readyListener);
web3Auth.on(CONNECTOR_EVENTS.CONNECTED, connectedListener);
web3Auth.on(CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
web3Auth.on(CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
web3Auth.on(CONNECTOR_EVENTS.CONNECTING, connectingListener);
web3Auth.on(CONNECTOR_EVENTS.ERRORED, errorListener);
web3Auth.on(CONNECTOR_EVENTS.REHYDRATION_ERROR, rehydrationErrorListener);
web3Auth.on(CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
web3Auth.on(CONNECTOR_EVENTS.CONNECTION_UPDATED, connectionUpdatedListener);
web3Auth.on(CONNECTOR_EVENTS.CONNECTOR_DATA_UPDATED, connectorDataUpdatedListener);
if (web3Auth.loginMode === LOGIN_MODE.MODAL) {
web3Auth.on(CONNECTOR_EVENTS.CONSENT_ACCEPTED, consentAcceptedListener);
}
}
return () => {
if (!web3Auth) return;
web3Auth.removeListener(CONNECTOR_EVENTS.NOT_READY, notReadyListener);
web3Auth.removeListener(CONNECTOR_EVENTS.READY, readyListener);
web3Auth.removeListener(CONNECTOR_EVENTS.CONNECTED, connectedListener);
web3Auth.removeListener(CONNECTOR_EVENTS.DISCONNECTED, disconnectedListener);
web3Auth.removeListener(CONNECTOR_EVENTS.CONNECTING, connectingListener);
web3Auth.removeListener(CONNECTOR_EVENTS.ERRORED, errorListener);
web3Auth.removeListener(CONNECTOR_EVENTS.REHYDRATION_ERROR, rehydrationErrorListener);
web3Auth.removeListener(CONNECTOR_EVENTS.MFA_ENABLED, mfaEnabledListener);
web3Auth.removeListener(CONNECTOR_EVENTS.AUTHORIZED, authorizedListener);
web3Auth.removeListener(CONNECTOR_EVENTS.CONNECTION_UPDATED, connectionUpdatedListener);
web3Auth.removeListener(CONNECTOR_EVENTS.CONNECTOR_DATA_UPDATED, connectorDataUpdatedListener);
if (web3Auth.loginMode === LOGIN_MODE.MODAL) {
web3Auth.removeListener(CONNECTOR_EVENTS.CONSENT_ACCEPTED, consentAcceptedListener);
}
if (cleanupOnUnmount) {
web3Auth.cleanup();
}
};
}, [cleanupOnUnmount, notReadyUsesCurrentStatus, web3Auth]);
return useMemo(() => {
return {
web3Auth,
isConnected,
isInitialized,
connection,
status,
isInitializing,
initError,
isMFAEnabled,
chainId,
chainNamespace,
getPlugin,
setIsMFAEnabled,
isAuthorized
};
}, [web3Auth, isConnected, isInitialized, connection, status, getPlugin, isInitializing, initError, isMFAEnabled, setIsMFAEnabled, chainId, chainNamespace, isAuthorized]);
}
export { useWeb3AuthInnerContextValue };