wevm / wagmi

React Hooks for Ethereum
https://wagmi.sh
MIT License
5.79k stars 968 forks source link

useAccount doesn't use the set wagmi config - defaults to chainId 1 #4078

Closed blmalone closed 2 weeks ago

blmalone commented 2 weeks ago

Check existing issues

Describe the bug

The useAccount() function isn't picking up the network configuration whereas the other use*() functions do.

Link to Minimal Reproducible Example

No response

Steps To Reproduce

Create wagmi config e.g.

import { createConfig, http } from 'wagmi';
import { base, baseSepolia, optimism } from 'wagmi/chains';
import { coinbaseWallet } from 'wagmi/connectors';

export function createWagmiConfig(rpcUrl: string, projectId?: string) {
  // Keep this till we fully deprecated RK inside the template
  if (projectId) {
    console.log('projectId:', projectId);
  }

  // Temporary hack, until we configure a FE page in OnchainKit to copy just the API key
  const baseUrl = rpcUrl.replace(/\/v1\/(.+?)\//, '/v1/base/');
  const baseSepoliaUrl = rpcUrl.replace(/\/v1\/(.+?)\//, '/v1/base-sepolia/');

  return createConfig({
    chains: [base, baseSepolia, optimism],
    connectors: [
      coinbaseWallet({
        appName: '0xCafeBabe',
        preference: 'all', // Setting this as all gives you the QR code for scanning with Coinbase wallet.
      }),
    ],
    ssr: true,
    transports: {
      [baseSepolia.id]: http(baseSepoliaUrl),
      [base.id]: http(baseUrl),
    },
  });
}

Expect it to be represented in useAccount() in a component:

import { useAccount, useChainId, useChains } from 'wagmi';

function AccountConnect() {
  const account = useAccount();
  const chainId = useChainId();
  const chains = useChains();
  console.log("We are printing the chains from AccountConnect:")
  console.log(chains);

  console.log("We are printing the account from AccountConnect:");
  console.log(account);

  console.log("We are printing the chainID from AccountConnect:");
  console.log(chainId);

  if(account.chainId !== chainId) {
    throw new Error("Chain ID mismatch - this is a bug in wagmi");
  }

  return (
    <div>
    </div>
  );
}

export default AccountConnect;

What Wagmi package(s) are you using?

wagmi

Wagmi Version

^2.9.2

Viem Version

2.x

TypeScript Version

~5.3.3

Anything else?

No response

github-actions[bot] commented 2 weeks ago

Hello @blmalone.

Please provide a minimal reproduction using StackBlitz, TypeScript Playground (for type issues), or a separate minimal GitHub repository.

Minimal reproductions are required as they save us a lot of time reproducing your config/environment and issue, and allow us to help you faster.

Once a minimal reproduction is added, a team member will confirm it works, then re-open the issue.