Hey!
I try to run abstraction account wallet with social login and wagmi.
I use
- @web3auth/no-modal ^9.4.5
- @web3auth/account-abstraction-provider ^9.4.5
- @web3auth/web3auth-wagmi-connector ^7.0.0
- wagmi ^2.13.3
Everything works but when I try to login (Google) for the first time I get only EOA wallet address from web3auth. After page refreshing it becomes possible to get smart account address too.
What am I doing wrong ?
here is my code
import { CHAIN_NAMESPACES, WEB3AUTH_NETWORK } from '@web3auth/base';
import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider';
import { Web3AuthNoModal } from '@web3auth/no-modal';
import { AuthAdapter } from '@web3auth/auth-adapter';
import { entryPoint06Address } from 'viem/account-abstraction';
import {
AccountAbstractionProvider,
KernelSmartAccount
} from '@web3auth/account-abstraction-provider';
const clientId =
'...';
const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: '0x1',
rpcTarget: 'https://rpc.ankr.com/eth',
displayName: 'Ethereum Mainnet',
blockExplorerUrl: 'https://etherscan.io',
ticker: 'ETH',
tickerName: 'Ethereum',
logo: 'https://cryptologos.cc/logos/ethereum-eth-logo.png'
};
const accountAbstractionProvider = new AccountAbstractionProvider({
config: {
chainConfig,
smartAccountInit: new KernelSmartAccount({
entryPoint: {
address: entryPoint06Address,
version: '0.6'
},
version: '0.2.2'
}),
bundlerConfig: {
url: `https://rpc.zerodev.app/api/v2/bundler/...`
},
paymasterConfig: {
url: 'https://rpc.zerodev.app/api/v2/paymaster/...'
}
}
});
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig }
});
export const web3auth = new Web3AuthNoModal({
clientId,
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
accountAbstractionProvider,
privateKeyProvider,
enableLogging: true,
useAAWithExternalWallet: false
});
const authadapter = new AuthAdapter({
adapterSettings: {
loginConfig: {
google: {
verifier: 'google',
typeOfLogin: 'google',
clientId: '...'
},
twitter: {
verifier: 'twitter',
typeOfLogin: 'twitter',
clientId: '...'
},
discord: {
verifier: 'discord-verifier',
typeOfLogin: 'discord',
clientId: '...
}
}
}
});
web3auth.configureAdapter(authadapter);
// wagmi config
export const wagmiConfig = createConfig({
chains: [mainnet, bsc, polygon, arbitrum, optimism, avalanche, base],
connectors: [
metaMask(),
injected(),
walletConnect({
projectId: '...',
qrModalOptions: {
themeMode: 'light'
}
}),
Web3AuthConnector({
web3AuthInstance: web3auth,
name: 'Google',
id: 'google',
loginParams: {
loginProvider: 'google'
}
}),
Web3AuthConnector({
web3AuthInstance: web3auth,
name: 'Twitter',
id: 'twitter',
loginParams: {
loginProvider: 'twitter'
}
}),
Web3AuthConnector({
web3AuthInstance: web3auth,
name: 'Discord',
id: 'discord',
loginParams: {
loginProvider: 'discord'
}
})
],
transports: {
[mainnet.id]: http(),
[bsc.id]: http(),
[polygon.id]: http(),
[arbitrum.id]: http(),
[optimism.id]: http(),
[avalanche.id]: http(),
[base.id]: http()
}
});
Console after the first connecting
success data - is from onSuccess handler
import { useConnect } from 'wagmi';
const {connect} = useConnect();
connect(params, {
onSuccess: (data) => {
console.log('success data: ', data);
}
});
addresses
const walletClient = createWalletClient({
transport: custom(web3auth.provider)
});
const addresses = await walletClient.getAddresses();