useChains() error at addChain() bad version

[vexxvakan]

Hey,

Getting this error whenever I try enabling a chain which is not yet added to Keplr over useChains(). I expected that Keplr pops up and asks to add the chain but it errored instead.

[vexxvakan]

Sure thing, here you go:

First of all we specify all enabled chains in a Zustand state, can just be a normal string array useState of course

and in our Connect Wallet button component we setup our list of connected chains as follows:

  const { enabledChains, addEnabledChain } = useEnabledChains()
  const chains = useChains(enabledChains)
  const { mainWallet } = useWallet()
  const { disconnect, username, connect } = chains.cosmoshub

if we modify the enabledChains array anywhere in our app it will run the following effect:

useEffect(() => {
    if (mainWallet?.isWalletConnected) {
      for (const chain of Object.values(chains)) {
        if (!chain.address) {
          chain.connect()
        }
      }
    }
  }, [enabledChains])

which should parse all chain names and check if there is an address for this wallet (same result for isWalletConnected) and if it isn't it SHOULD pop up Keplr and ask to add the chain. If the chain is already added to Keplr the Approve popup works just fine however if a chain is not yet added to Keplr the app crashes with the following error:

Unhandled Runtime Error

Error: contact maintainers: bad version

Call Stack

cleanVer

node_modules/.pnpm/@chain-registry+keplr@1.25.0/node_modules/@chain-registry/keplr/main/index.js (35:0)

chainRegistryChainToKeplr

node_modules/.pnpm/@chain-registry+keplr@1.25.0/node_modules/@chain-registry/keplr/main/index.js (51:0)

KeplrClient.addChain

nodemodules/.pnpm/@cosmos-kit+keplr-extension@2.5.10@cosmjs+amino@0.31.3@cosmjs+cosmwasm-stargate@0.31.3@cos_vyb5iwea4eqs5mtt3q7lxp3xza/node_modules/@cosmos-kit/keplr-extension/esm/extension/client.js (81:54)

wallet.callbacks.beforeConnect

nodemodules/.pnpm/@cosmos-kit+react-lite@2.5.9@cosmjs+amino@0.31.3@cosmjs+cosmwasm-stargate@0.31.3@cosmjs+pr_dqjrlpvc7f3mqqdzcx6fjdwhqm/node_modules/@cosmos-kit/react-lite/esm/hooks/useChains.js (27:0)

async ChainKeplrExtension.connect

nodemodules/.pnpm/@cosmos-kit+core@2.7.7@cosmjs+amino@0.31.3@cosmjs+cosmwasm-stargate@0.31.3@cosmjs+proto-si_y6eoi4kkmvwmgvaseh47xml3ni/node_modules/@cosmos-kit/core/esm/bases/wallet.js (143:0)

async connect

nodemodules/.pnpm/@cosmos-kit+core@2.7.7@cosmjs+amino@0.31.3@cosmjs+cosmwasm-stargate@0.31.3@cosmjs+proto-si_y6eoi4kkmvwmgvaseh47xml3ni/node_modules/@cosmos-kit/core/esm/repository.js (85:0)

[MbBrainz]

Great summary @vexxvakan. Thanks for that!

[twhy]

@vexxvakan Thanks for the information provided.

The error is from this repo https://github.com/cosmology-tech/chain-registry This line https://github.com/cosmology-tech/chain-registry/blob/main/packages/keplr/src/index.ts#L24

1. To simplify the problem, please keep your chain list small e.g. ['cosmoshub', 'stargaze', 'migaloo'] cosmoshub and stargaze are supported by Keplr by default while migaloo needed to be added to Keplr.

   Please test whether it works for this chain list containing only three chains.

2. You can try update the useEffect code to below

   useEffect(() => {
   if (mainWallet?.isWalletConnected) {
     for (const chain of Object.values(chains)) {
       if (!chain.address) {
         chain.connect();
         break;    //  Add this line to just call one of the connect method
       }
     }
   }
   }, [enabledChains])

[vexxvakan]

Hey @twhy

I created a repro example codesandbox here

just type in any chainName, not chain_id, and click "add chain". For already added chains it asks to approve the connection and for not yet added chains it throws the error mentioned above.

[vexxvakan]

It may be a problem that the chain-registry branch used in the package "chain-registry" is outdated and thus crashing? it is 3 months old now. @twhy

[twhy]

@vexxvakan Thanks. Let me check it.

[MbBrainz]

@twhy any update on this?

[twhy]

@MbBrainz Working on it. Trying to fix it today.

[MbBrainz]

@twhy lmk if i can help you with anything

[twhy]

@MbBrainz You can read the source code of cosmos-kit to see if you can fix it. Or you can work on other parts of your app first. I will fix this ASAP.

[pyramation]

I think I have a fix for this one, stay tuned

[pyramation]

@MbBrainz can you try to upgrade cosmos-kit and/or chain-registry?

[MbBrainz]

@pyramation I updated to the latest cosmos-kit and chain-registry version, and i have encountered a different error. When im connecting the wallet, it first shows the "cosmostation not installed" error and then i have to click x to go to the wallet connection screen.

I made a small loom to show what is happening: https://www.loom.com/share/dfdd19246d2b4cd0ba35fa53f761fc48?sid=6094e036-adba-4e81-88fc-5f13bd700dfb

The exact versions of cosmos-kit i have installed during this error are:

{
    "@cosmjs/stargate": "^0.31.3",
    "@cosmos-kit/core": "2.7.10",
    "@cosmos-kit/cosmostation": "2.5.0",
    "@cosmos-kit/keplr": "2.5.0",
    "@cosmos-kit/keplr-extension": "^2.6.0",
    "@cosmos-kit/leap": "2.5.0",
    "@cosmos-kit/leap-extension": "^2.6.0",
    "@cosmos-kit/react": "2.9.14",
    "@cosmos-kit/terrastation": "^0.1.7",
    "@cosmos-kit/xdefi-extension": "2.5.12",
    ...
    "chain-registry": "^1.23.0",
    }

[twhy]

@pyramation Please publish a new version of cosmos-kit which fixes the issue that @MbBrainz just found in the video.

[twhy]

@MbBrainz Does the original issue fixed after your upgrade ?

[vexxvakan]

@pyramation @twhy I just updated the Codesandbox with the newest versions and the initial issue is indeed gone!

We got the fix here

Opened a new issue #380 for @MbBrainz' error because I have been seeing the same on another project of mine and now on this one as well

[pyramation]

if anyone has this re-appear — please use npm/yarn resolutions prop in your package to pin to the fixed version — currently that is

@cosmos-kit/keplr@2.5.0
@chain-registry/keplr@1.29.0