Wrapping my app in AlchemyAccountProvider makes my app load forever

[RomanSirmanov]

Hello, I've added provider and config from docs

export const configAlchemy = createConfig({
// required
rpcUrl: '/api/rpc',
chain: arbitrumSepolia,
storage: cookieStorage,
})

And now I can't load my app, constant loading, if I remove it everything works fine.
"dependencies": {
"@alchemy/aa-alchemy": "^3.18.2",
"@apollo/client": "^3.8.4",
"@atlaseurope/crypto-payment": "^1.0.0-alpha.7",
"@midcontract/protocol": "1.0.0-rc.28",
"@rainbow-me/rainbowkit": "^2.1.2",
"@tanstack/react-query": "^5.51.1",
"alchemy-sdk": "^3.3.1",
"ethers": "^6.11.0",
"graphql": "^16.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.15.0",
"viem": "2.x",
"wagmi": "^2.10.0",
},

[avarobinson]

Hi Roman!

Are you seeing any output in your console or terminal logs? Have you configured your API key?

[moldy530]

Are you running SSR or no? This is a bug we discovered while working on v4 that affects CSR apps. If you're ok with using the alpha packages, you can replace aa-alchemy with @account-kit/react and @account-kit/infra.

Another option is to set ssr: true in your config. This fixes the infinite load, but doesn't address the core issue

[RomanSirmanov]

Yeap, I did it that way, for now works fine. I have another question. I now have account, but to integrate it with our sdk we change provider every time by
await midContractProtocol.changeProvider(
window.ethereum as EIP1193Provider,
)
it works for MetaMask, but in case of creation with your sdk it doesn't work. Can you tell me how I can get this account similar to metamask with window.ethereum?

[avarobinson]

@RomanSirmanov What functionality exactly are you trying to enable with this call to changeProvider? What error are you getting?

The SmartAccountClient from the aa-core package is an EIP-1193 compliant provider that you should be able to use with any web3 library similar to window.ethereum. See more about the client here.

[RomanSirmanov]

@avarobinson midContractProtocol.changeProvider(
window.ethereum as EIP1193Provider,
) uses a provider
const accounts = await provider.request({ method: "eth_accounts" });
where provider is a provider of type EIP1193Provider, which was passed into the function.
After this, we obtain the chainId by calling
const providerChainId = await provider
.request({
method: "eth_chainId",
});
This is done to check the chain on the environment and the chain that is in the provider
if (currentChainId != providerChainId) {
throw new NotMatchError(chainId ${providerChainId} provider and current chainId ${currentChainId});
}
After this, using viem methods, we form public and wallet objects for read and write operations
this.wallet = createWalletClient({
account,
chain: this.wallet.chain,
transport: custom(provider),
});
this.public = createPublicClient({
chain: this.public.chain,
transport: custom(provider),
});
This is all that changeProvider does., so we are curious if we can use an alchemy provider with the same methods or we need to adjust our sdk

[avarobinson]

@RomanSirmanov Gotcha! As mentioned above, the SmartAccountClient from the aa-core package is an EIP-1193 compliant provider that you should be able to use in place of window.ethereum passed to changeProvider.

The chain being used by the SmartAccountClient is defined by you in the client initialization. You can manage multiple chains and chain switching with the React [useChain](https://accountkit.alchemy.com/react/useChain) hook. I do think just the smartAccountClient should be sufficient to use any web3 library functions.

Let me know if that doesn't work for your use case!