Get client by provider instead of importing the correct chain

[ryespresso]

Dealing with a website that uses a LOT of chains. Kind of a nuisance to create a wallet client for each chain. Would be nice to somehow be able to derive what chain you need for your client based on the provider. Any ideas?

Doing the following but it's a pain to get the typescript right.

import type { EIP1193Provider } from 'viem';
import * as chains from 'viem/chains';

const findChain = async (provider: EIP1193Provider) => {
  const chainId = Number(await provider.request({ method: 'eth_chainId' }));
  const chainsArr = Object.keys(chains);

  const chain = chainsArr.find((c: string) => chains[c].id === chainId);
  if (!chain) return null;
  return chains[chain];
};

export const getWalletClient = async (provider: EIP1193Provider) => {
  const chain = await findChain(provider);
  return createWalletClient({
    chain,
    transport: custom(provider),
  });
};

[fubhy]

If you don't care about bundle size and tree-shaking (which you generally should), then you can certainly do this. However, I'd not use a wildcard import for that but instead set up a strict const mapping of [chain id] => [chain] for the chains you plan to support. Otherwise, you are including literally every single chain in your final app bundle (throwing tree shaking out the window essentially). Another benefit is that, through the strict const mapping of chain ids & chains, you'd be able to infer the resulting type with a type guard more easily.