@web3auth/no-modal
Version:
Multi chain wallet aggregator for web3Auth
261 lines (252 loc) • 11.6 kB
JavaScript
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _objectSpread from '@babel/runtime/helpers/objectSpread2';
import { useMemo, createElement, useRef, useEffect, Fragment } from 'react';
import { defineChain, isAddress } from 'viem';
import { createConfig, WagmiProvider as WagmiProvider$1, injected, webSocket, http, fallback, useConfig, useReconnect, useConnectionEffect } from 'wagmi';
import { defaultWagmiConfig } from './constants.js';
import { useWeb3Auth } from '../hooks/useWeb3Auth.js';
import { CHAIN_NAMESPACES } from '@toruslabs/base-controllers';
import { WalletInitializationError } from '../../base/errors/index.js';
import { WEB3AUTH_CONNECTOR_ID } from '../../base/connector/constants.js';
import { log } from '../../base/loglevel.js';
import { useWeb3AuthDisconnect } from '../hooks/useWeb3AuthDisconnect.js';
const _excluded = ["children"];
function getWeb3authConnector(config) {
return config.connectors.find(c => c.id === WEB3AUTH_CONNECTOR_ID);
}
// Helper to create a Web3Auth connector to connect with wagmi
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function createWeb3AuthConnectorForWagmi(provider) {
const baseConnector = injected({
target: {
provider: provider,
id: WEB3AUTH_CONNECTOR_ID,
name: "Web3Auth"
}
});
return config => {
const connector = baseConnector(config);
const baseOnAccountsChanged = connector.onAccountsChanged.bind(connector);
// we need to handle the `accountsChanged` event emitted on the cross-namespace chain switch.
// on evm -> solana, the accountsChanged event is emitted with the solana address, which is not valid for evm.
// that causes the `invalid account address` error in wagmi. So, here, we're filtering out the solana addresses.
connector.onAccountsChanged = accounts => {
if (accounts.length > 0 && !accounts.every(account => typeof account === "string" && isAddress(account))) {
log.warn("onAccountsChanged::accountsChanged event received on non-EVM address");
return;
}
baseOnAccountsChanged(accounts);
};
return connector;
};
}
// Helper to initialize connectors for the given wallets
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function setupConnector(provider, config) {
let connector = getWeb3authConnector(config);
if (connector) return connector;
// Create new connector if not already existing
connector = createWeb3AuthConnectorForWagmi(provider);
const result = config._internal.connectors.setup(connector);
config._internal.connectors.setState(current => [...current, result]);
return result;
}
async function connectWeb3AuthWithWagmi(connector, config) {
var _config$storage, _config$storage2;
await Promise.all([(_config$storage = config.storage) === null || _config$storage === void 0 ? void 0 : _config$storage.removeItem(`${connector.id}.disconnected`), (_config$storage2 = config.storage) === null || _config$storage2 === void 0 ? void 0 : _config$storage2.setItem("recentConnectorId", connector.id)]);
let chainId = await connector.getChainId();
if (!config.chains.find(c => c.id === chainId)) {
chainId = config.chains[0].id;
}
const accounts = await connector.getAccounts();
const connections = new Map([[connector.uid, {
accounts: [accounts[0]],
chainId,
connector
}]]);
config.setState(state => _objectSpread(_objectSpread({}, state), {}, {
chainId,
connections,
current: connector.uid,
status: "connected"
}));
}
function resetConnectorState(config) {
config._internal.connectors.setState(prev => prev.filter(c => c.id !== WEB3AUTH_CONNECTOR_ID));
config.connectors.filter(c => c.id !== WEB3AUTH_CONNECTOR_ID);
}
async function disconnectWeb3AuthFromWagmi(config) {
var _config$storage3, _config$storage4;
const connector = getWeb3authConnector(config);
await Promise.all([(_config$storage3 = config.storage) === null || _config$storage3 === void 0 ? void 0 : _config$storage3.setItem(`${connector === null || connector === void 0 ? void 0 : connector.id}.disconnected`, true), (_config$storage4 = config.storage) === null || _config$storage4 === void 0 ? void 0 : _config$storage4.removeItem("injected.connected")]);
resetConnectorState(config);
config.setState(state => _objectSpread(_objectSpread({}, state), {}, {
chainId: state.chainId,
connections: new Map(),
current: undefined,
status: "disconnected"
}));
}
function Web3AuthWagmiProvider({
children
}) {
var _connection$ethereumP, _connection$connector;
const {
isConnected,
connection,
chainNamespace
} = useWeb3Auth();
const {
disconnect
} = useWeb3AuthDisconnect();
const wagmiConfig = useConfig();
const {
mutate: reconnect
} = useReconnect();
const suppressWagmiDisconnect = useRef(false);
const lastSyncedProvider = useRef((_connection$ethereumP = connection === null || connection === void 0 ? void 0 : connection.ethereumProvider) !== null && _connection$ethereumP !== void 0 ? _connection$ethereumP : null);
const lastSyncedConnectorName = useRef((_connection$connector = connection === null || connection === void 0 ? void 0 : connection.connectorName) !== null && _connection$connector !== void 0 ? _connection$connector : null);
useConnectionEffect({
onDisconnect: async () => {
log.info("Disconnected from wagmi");
const isSuppressed = suppressWagmiDisconnect.current;
suppressWagmiDisconnect.current = false;
if (!isSuppressed && isConnected) await disconnect();
// reset wagmi connector state if the provider handles disconnection because of the accountsChanged event
// from the connected provider
if (getWeb3authConnector(wagmiConfig)) {
resetConnectorState(wagmiConfig);
}
}
});
useEffect(() => {
(async _connection$ethereumP2 => {
const newConnection = connection !== null && connection !== void 0 ? connection : null;
const newEth = (_connection$ethereumP2 = connection === null || connection === void 0 ? void 0 : connection.ethereumProvider) !== null && _connection$ethereumP2 !== void 0 ? _connection$ethereumP2 : null;
const w3aWagmiConnector = getWeb3authConnector(wagmiConfig);
const shouldBindToWagmi = isConnected && chainNamespace === CHAIN_NAMESPACES.EIP155 && Boolean(newConnection && newEth);
if (shouldBindToWagmi) {
const hasSameBinding = lastSyncedProvider.current === newEth && lastSyncedConnectorName.current === newConnection.connectorName && wagmiConfig.state.status === "connected";
if (hasSameBinding) {
// rehydration: already connected to the same provider, so no need to reconnect
return;
}
// `ethereumProvider` is a stable proxy (`commonJRPCProvider`) across account switches,
// so key wagmi resyncs off the Web3Auth connection object instead of provider identity.
if (w3aWagmiConnector) {
resetConnectorState(wagmiConfig);
}
lastSyncedProvider.current = newEth;
lastSyncedConnectorName.current = newConnection.connectorName;
const connector = setupConnector(newEth, wagmiConfig);
if (!connector) {
log.error("Failed to setup react wagmi connector");
throw new Error("Failed to setup connector");
}
await connectWeb3AuthWithWagmi(connector, wagmiConfig);
reconnect();
} else {
lastSyncedProvider.current = null;
lastSyncedConnectorName.current = null;
if (wagmiConfig.state.status === "connected") {
suppressWagmiDisconnect.current = true;
await disconnectWeb3AuthFromWagmi(wagmiConfig);
} else if (w3aWagmiConnector) {
resetConnectorState(wagmiConfig);
}
}
})();
}, [chainNamespace, connection, isConnected, reconnect, wagmiConfig]);
return createElement(Fragment, null, children);
}
function WagmiProvider(_ref) {
let {
children
} = _ref,
props = _objectWithoutProperties(_ref, _excluded);
const {
config
} = props;
const {
web3Auth,
isInitialized
} = useWeb3Auth();
const getTransport = chain => {
const {
wsTarget,
rpcTarget,
fallbackWsTargets = [],
fallbackRpcTargets = []
} = chain;
const transports = [];
if (wsTarget) transports.push(webSocket(wsTarget));
if (fallbackWsTargets.length > 0) transports.push(...fallbackWsTargets.map(target => webSocket(target)));
if (rpcTarget) transports.push(http(rpcTarget));
if (fallbackRpcTargets.length > 0) transports.push(...fallbackRpcTargets.map(target => http(target)));
return fallback(transports);
};
const finalConfig = useMemo(() => {
var _web3Auth$coreOptions;
web3Auth === null || web3Auth === void 0 || web3Auth.setAnalyticsProperties({
wagmi_enabled: true
});
if (!isInitialized) return defaultWagmiConfig;
const finalConfig = _objectSpread(_objectSpread({
ssr: true
}, config), {}, {
chains: undefined,
connectors: [],
transports: {},
multiInjectedProviderDiscovery: false,
client: undefined
});
const wagmiChains = [];
if (isInitialized && web3Auth !== null && web3Auth !== void 0 && (_web3Auth$coreOptions = web3Auth.coreOptions) !== null && _web3Auth$coreOptions !== void 0 && _web3Auth$coreOptions.chains) {
var _web3Auth$currentChai;
const defaultChainId = (_web3Auth$currentChai = web3Auth.currentChain) === null || _web3Auth$currentChai === void 0 ? void 0 : _web3Auth$currentChai.chainId;
const chains = web3Auth.coreOptions.chains.filter(chain => chain.chainNamespace === CHAIN_NAMESPACES.EIP155);
if (chains.length === 0) throw WalletInitializationError.invalidParams("No valid chains found in web3auth config for wagmi.");
chains.forEach(chain => {
const wagmiChain = defineChain({
id: Number.parseInt(chain.chainId, 16),
// id in number form
name: chain.displayName,
rpcUrls: {
default: {
http: [chain.rpcTarget],
webSocket: [chain.wsTarget]
}
},
blockExplorers: chain.blockExplorerUrl ? {
default: {
name: "explorer",
// TODO: correct name if chain config has it
url: chain.blockExplorerUrl
}
} : undefined,
nativeCurrency: {
name: chain.tickerName,
symbol: chain.ticker,
decimals: chain.decimals || 18
}
});
if (defaultChainId === chain.chainId) {
wagmiChains.unshift(wagmiChain);
} else {
wagmiChains.push(wagmiChain);
}
finalConfig.transports[wagmiChain.id] = getTransport(chain);
});
finalConfig.chains = [wagmiChains[0], ...wagmiChains.slice(1)];
}
return createConfig(finalConfig);
}, [config, web3Auth, isInitialized]);
return createElement(WagmiProvider$1, // typecast to WagmiProviderPropsBase to avoid type error
// as we are omitting the config prop from WagmiProviderProps
// and creating a new config object with the finalConfig
_objectSpread(_objectSpread({}, props), {}, {
config: finalConfig,
reconnectOnMount: false
}), createElement(Web3AuthWagmiProvider, null, children));
}
export { WagmiProvider, connectWeb3AuthWithWagmi, createWeb3AuthConnectorForWagmi, disconnectWeb3AuthFromWagmi, getWeb3authConnector, resetConnectorState, setupConnector };