Switching default chain programmatically

[m-peko]

Hi there,

I am using web3modal in my NextJS application. I have a top level component Web3ModalProvider defined like:

// ...

const queryClient = new QueryClient();

createWeb3Modal({
  projectId,
  siweConfig,
  wagmiConfig,
  defaultChain: mainnet,
  enableAnalytics: true,
});

export default function Web3ModalProvider({
  children,
  initialState,
}: {
  children: ReactNode;
  initialState?: State;
}) {
  return (
    <WagmiProvider config={wagmiConfig} initialState={initialState}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </WagmiProvider>
  );
}

As you can see, the default chain is set to mainnet.
However, I have a dropdown in my application which allows users to set the default chain to whatever they want before they even connect their wallet. This way, they don't need to switch from mainnet to their desired chain immediately after connect.

This is the code I am using for my dropdown, to switch the default chain:

export default function Button() {
  const chainId = useChainId();
  const { chains, switchChain } = useSwitchChain();

  return (
    <Listbox
      value={chainId}
      onChange={(id) => {
        if (chainId !== id) {
          switchChain({ chainId: id });
        }
      }}
    >
    ...
    </Listbox>
  );
}

and then i have custom connect button like:

export default function ConnectButton() {
  const { address } = useAccount();
  const { open } = useWeb3Modal();

  if (address) {
    return;
  }

  return (
    <button
      onClick={() => open()}
    >
      Connect
    </button>
  );
}

but this always connects me to mainnet first.

What am I doing wrong?