Archived Content from Web3Auth Community
This topic was originally posted by dev19 on 8/27/2024.
This content has been migrated from our previous community forum to preserve valuable discussions.
I have created the wagmi config for SFA it also get connected with the site as well but when i tried to use
Connector form useConnector() and try to get the user Account it says provider not found
here is the error
here is my code
of custom connector
import {
ChainNotConfiguredError,
createConnector,
normalizeChainId,
} from â@wagmi/coreâ;
import type { IWeb3Auth } from â@web3auth/baseâ;
import * as pkg from â@web3auth/baseâ;
import { Provider } from â@web3auth/web3auth-wagmi-connectorâ;
import {
Chain,
getAddress,
SwitchChainError,
UserRejectedRequestError,
} from âviemâ;
import { googleLogout } from â@react-oauth/googleâ;
const { ADAPTER_STATUS, ADAPTER_EVENTS, CHAIN_NAMESPACES, log } = pkg;
interface ConnectParams {
chainId?: number;
loginParams?: any;
}
export function Web3AuthSFAConnector(parameters:any) { let walletProvider: Provider | null = null; const { web3AuthInstance ,loginParams} = parameters;return createConnector<Provider>((config) => ({
id: âweb3auth-sfaâ,
name: âWeb3Auth SFAâ,
type: âWeb3Authâ,
async connect({ chainId }: ConnectParams = {}) {
try {
config.emitter.emit(âmessageâ, {
type: âconnectingâ,
});
const web3 = await web3AuthInstance;
walletProvider = web3.provider;
const provider = await this.getProvider();
provider.on(âaccountsChangedâ, this.onAccountsChanged);
provider.on(âchainChangedâ, this.onChainChanged);
provider.on(âdisconnectâ, this.onDisconnect.bind(this));// const provider = await this.getProvider(); // provider.on('accountsChanged', this.onAccountsChanged); // provider.on('chainChanged', this.onChainChanged); // provider.on('disconnect', this.onDisconnect.bind(this)); if (!web3.connected) { // Handling dynamic arguments for SFA connection console.log('WEB3 intance===>', await web3AuthInstance); const connector = await web3AuthInstance?.connect(loginParams); console.log('yoo--.', connector); web3AuthInstance.on(ADAPTER_EVENTS.CONNECTED, (data) => { walletProvider = web3AuthInstance.provider; console.log('IM CONNECTED WITH YOU '); config.emitter.emit('change', { accounts: data.accounts.map((x) => getAddress(x)), chainId: normalizeChainId(data.chainId), }); }); web3AuthInstance.on(ADAPTER_EVENTS.DISCONNECTED, () => { config.emitter.emit('disconnect'); }); } else { // web3AuthInstance.on(ADAPTER_EVENTS.CONNECTED, (data) => { // console.log('IM CONNECTED WITH YOU '); // config.emitter.emit('change', { // accounts: data.accounts.map((x) => getAddress(x)), // chainId: normalizeChainId(data.chainId), // }); // }); walletProvider = web3AuthInstance.provider; } let currentChainId = await this.getChainId(); if (chainId && currentChainId !== chainId) { const chain = await this.switchChain!({ chainId }).catch((error) => { if (error.code === UserRejectedRequestError.code) throw error; return { id: currentChainId }; }); currentChainId = chain?.id ?? currentChainId; } const accounts = await this.getAccounts(); return { accounts, chainId: currentChainId }; } catch (error) { log.error('error while connecting', error); this.onDisconnect(); throw new UserRejectedRequestError( 'Something went wrong' as unknown as Error, ); } }, async getAccounts() { const provider = await this.getProvider(); console.log('hello world', provider); if (!provider) { console.log('provider not found',web3AuthInstance) console.log("PROVIDER NOT FOUND BRO WHAT ARE YOU DOING") if(web3AuthInstance) { return await web3AuthInstance.provider; } } const accounts:any = await web3AuthInstance?.provider.request({ method: 'eth_accounts' }) const acc = accounts?.map( getAddress, ) console.log('got account',acc) return acc }, async getChainId() { const provider = await this.getProvider(); const chainId = await provider.request<unknown, number>({ method: 'eth_chainId', }); return normalizeChainId(chainId); }, async getProvider(): Promise<Provider> { try { if (walletProvider) { return walletProvider; } let web3 = await web3AuthInstance; if (loginParams && web3.status === ADAPTER_STATUS.READY) { await web3AuthInstance.connect(loginParams); } walletProvider = await web3.provider; console.log("Wallet Provdier",walletProvider,web3) return walletProvider as Provider; } catch (error) { console.log('Error while retrieving provider:', error); throw new Error('Failed to get provider'); } }, async isAuthorized() { try { const accounts = await this.getAccounts(); return !!accounts.length; } catch { return false; } }, async switchChain({ chainId }): Promise<Chain> { try { const chain = config.chains.find((x) => x.id === chainId); if (!chain) throw new SwitchChainError(new ChainNotConfiguredError()); await web3AuthInstance.addChain({ chainNamespace: CHAIN_NAMESPACES.EIP155, chainId: `0x${chain.id.toString(16)}`, rpcTarget: chain.rpcUrls.default.http[0], displayName: chain.name, blockExplorerUrl: chain.blockExplorers?.default.url[0] || '', ticker: chain.nativeCurrency?.symbol || 'ETH', tickerName: chain.nativeCurrency?.name || 'Ethereum', decimals: chain.nativeCurrency?.decimals || 18, logo: chain.nativeCurrency?.symbol ? `https://images.toruswallet.io/${chain.nativeCurrency?.symbol.toLowerCase()}.svg` : 'https://images.toruswallet.io/eth.svg', }); await web3AuthInstance.switchChain({ chainId: `0x${chain.id.toString(16)}`, }); config.emitter.emit("change", { chainId, }); return chain; } catch (error: unknown) { log.error('Error: Cannot change chain', error); throw new SwitchChainError(error as Error); } }, async disconnect(): Promise<void> { await web3AuthInstance.logout(); googleLogout(); const provider = await this.getProvider(); provider.removeListener('accountsChanged', this.onAccountsChanged); provider.removeListener('chainChanged', this.onChainChanged); }, onAccountsChanged(accounts) { if (accounts.length === 0) config.emitter.emit("disconnect"); else config.emitter.emit("change", { accounts: accounts.map((x) => getAddress(x)), }); }, onChainChanged(chain) { const chainId = normalizeChainId(chain); config.emitter.emit("change", { chainId }); }, onDisconnect(): void { config.emitter.emit("disconnect"); },
}));
}
useEffect(() => {
if (disabled) return;
(async () => {
const filteredConnectors = connectors.reduce(
(acc, connector: Connector) => {
if (acc.find((c) => c.id === connector.id)) return acc;
return [...acc, connector];
},
[] as Connector[],
);
console.log(filteredConnectors, 'yoooo-->');
const accountsPromises = filteredConnectors.map(async (connector) => {
const connectorAddresses = await connector.getAccounts();
const connectorAddress = connectorAddresses[0]?.toLowerCase();;
if (!connectorAddresses.length) return;
const smartAccount = await getSmartAccountClient({
useWeb3Auth: connector.id === 'web3auth',
});
const isAuthorized = await connector.isAuthorized();
if (!isAuthorized) return;
if (!connectorAddress) return;
if (
connector.id === 'web3auth' &&
(!smartAccount?.account?.address || !web3AuthInstance.connected)
)
return;
const account = {
address: (connector.id === 'web3auth'
? smartAccount?.account?.address ?? ''
: connectorAddress) as Address,
connector,
isWeb3Auth: connector.id === 'web3auth',
eoa: connectorAddress as Address,
};
return account;
});
const newAccounts: Account[] = (await Promise.all(accountsPromises))
.filter((a) => !!a)
.reduce((accounts, account) => {
// remove duplicates
if (!account) return accounts;
if (accounts.find((a) => a.address === account.address))
return accounts;
return [...accounts, account];
}, [] as Account[]) as Account[];
if (newAccounts.length) setConnectedAddresses(newAccounts);
})();
}, [
connectors,
getSmartAccountClient,
disabled,
setConnectedAddresses,
address,
]); this code im usgin to get my connector