hyperweb-io / hyperweb-io/cosmos-kit
`Uncaught TypeError: Cannot read properties of undefined (reading 'chain_id')` when using `useChains`
- Dominant language
- TypeScript
- Stars
- 201
- Forks
- 159
- PR merge metrics
- No merged PRs in 30d
Description
I'm experiencing an error when using `useChains`.
```log
useChains.js:15 Uncaught TypeError: Cannot read properties of undefined (reading 'chain_id')
at useChains.js:15:1
at Array.map ()
at useChains (useChains.js:15:1)
at DepositCard (DepositCard.tsx:71:1)
at renderWithHooks (react-dom.development.js:15486:1)
at mountIndeterminateComponent (react-dom.development.js:20103:1)
at beginWork (react-dom.development.js:21626:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
```
My code:
```typescript
// line that throws the error. defined in a component that exists within `ChainProvider`
const chains = useChains(['cosmoshub']);
```
```typescript
// Top level App component where I setup `ChainProvider`.
import type React from "react";
import { Route, Routes } from "react-router-dom";
import { ChainProvider } from "@cosmos-kit/react";
import { assets } from "chain-registry";
import { wallets } from "@cosmos-kit/keplr";
import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider } from "wagmi";
import {
evmChainsToRainbowKitChains,
ibcChainInfosToCosmosChains,
useConfig,
} from "config";
import { NotificationsContextProvider } from "features/Notifications";
import BridgePage from "pages/BridgePage/BridgePage";
import Layout from "pages/Layout";
// global styles
import "styles/index.scss";
// contrib styles
import "@rainbow-me/rainbowkit/styles.css";
import "@interchain-ui/react/styles";
import { toCosmosChainNames } from "./config/chainConfigs/types.ts";
/**
* App component with routes.
* Sets up the RainbowKitProvider and QueryClientProvider for tanstack/react-query.
*/
export default function App(): React.ReactElement {
const { evmChains, ibcChains } = useConfig();
const rainbowKitConfig = getDefaultConfig({
appName: "Flame Bridge",
projectId: "YOUR_PROJECT_ID", // TODO
chains: evmChainsToRainbowKitChains(evmChains),
});
const queryClient = new QueryClient();
const cosmosWalletConnectOptions = {
signClient: {
projectId: "YOUR_PROJECT_ID", // TODO
},
};
return (
}>
} />
);
}
```
Relevant code from cosmos-kit showing that `repo.chainRecord.chain` is what is `undefined`.
I'm following the simple example from the docs [here](https://docs.cosmology.zone/cosmos-kit/hooks/use-chains).
`useChain` does not throw an error.
```typescript
export function useChains(chainNames, sync = true) {
const names = Array.from(new Set(chainNames));
const context = useContext(walletContext);
if (!context) {
throw new Error('You have forgotten to use ChainProvider.');
}
const { walletManager, modalProvided } = context;
if (!modalProvided) {
throw new Error('You have to provide `walletModal` to use `useChains`, or use `useChainWallet` instead.');
}
const repos = names.map(name => walletManager.getWalletRepo(name));
const ids = repos.map(repo => repo.chainRecord.chain.chain_id); // throws error here
// ...
}
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.