useChains() error at addChain() bad version about cosmos-kit HOT 17 CLOSED

@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.

from cosmos-kit.

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[email protected]/node_modules/@chain-registry/keplr/main/index.js (35:0)

chainRegistryChainToKeplr

node_modules/.pnpm/@chain-registry[email protected]/node_modules/@chain-registry/keplr/main/index.js (51:0)

KeplrClient.addChain

node_modules/.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

node_modules/.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

node_modules/.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

node_modules/.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)

from cosmos-kit.

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.

from cosmos-kit.

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

from cosmos-kit.

Great summary @vexxvakan. Thanks for that!

from cosmos-kit.

@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])

from cosmos-kit.

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

from cosmos-kit.

@vexxvakan Thanks. Let me check it.

from cosmos-kit.

@twhy any update on this?

from cosmos-kit.

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

from cosmos-kit.

@twhy lmk if i can help you with anything

from cosmos-kit.

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

from cosmos-kit.

@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",
    }

from cosmos-kit.

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

from cosmos-kit.

@MbBrainz Does the original issue fixed after your upgrade ?

from cosmos-kit.

@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

from cosmos-kit.

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/[email protected]
@chain-registry/[email protected]

from cosmos-kit.