use cosmos instead of ibc

web/src/App.tsx

@@ -1,18 +1,18 @@
-import type React from "react";
-import { Route, Routes } from "react-router-dom";
-import { ChainProvider } from "@cosmos-kit/react";
-import { assets, chains } from "chain-registry";
+import type { Chain } from "@chain-registry/types";
 import { wallets as keplrWallets } from "@cosmos-kit/keplr";
 import { wallets as leapWallets } from "@cosmos-kit/leap";
-import type { Chain } from "@chain-registry/types";
-import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import { ChainProvider } from "@cosmos-kit/react";
+import { RainbowKitProvider, getDefaultConfig } from "@rainbow-me/rainbowkit";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { assets, chains } from "chain-registry";
+import type React from "react";
+import { Route, Routes } from "react-router-dom";
 import { WagmiProvider } from "wagmi";
 
 import {
-  evmChainsToRainbowKitChains,
-  cosmosChainInfosToCosmosKitChains,
   cosmosChainInfosToCosmosKitAssetLists,
+  cosmosChainInfosToCosmosKitChains,
+  evmChainsToRainbowKitChains,
   useConfig,
 } from "config";
 import { NotificationsContextProvider } from "features/Notifications";
@@ -30,7 +30,7 @@ import "@interchain-ui/react/styles";
  * Sets up the RainbowKitProvider and QueryClientProvider for tanstack/react-query.
  */
 export default function App(): React.ReactElement {
-  const { evmChains, ibcChains } = useConfig();
+  const { evmChains, cosmosChains } = useConfig();
 
   // wagmi and rainbowkit config
   const rainbowKitConfig = getDefaultConfig({
@@ -48,17 +48,18 @@ export default function App(): React.ReactElement {
   };
   // TODO - should i handle this so that for prod we rely on chain-registry?
   //  could do it lazily, https://cosmology.zone/learn/frontend/how-get-token-and-asset-information-in-the-interchain
-  const cosmosChains = cosmosChainInfosToCosmosKitChains(ibcChains);
-  const cosmosAssetLists = cosmosChainInfosToCosmosKitAssetLists(ibcChains);
+  const cosmosKitChains = cosmosChainInfosToCosmosKitChains(cosmosChains);
+  const cosmosKitAssetLists =
+    cosmosChainInfosToCosmosKitAssetLists(cosmosChains);
 
   return (
     <NotificationsContextProvider>
       <WagmiProvider config={rainbowKitConfig}>
         <QueryClientProvider client={queryClient}>
           <RainbowKitProvider>
             <ChainProvider
-              assetLists={[...assets, ...cosmosAssetLists]}
-              chains={[...chains, ...cosmosChains]}
+              assetLists={[...assets, ...cosmosKitAssetLists]}
+              chains={[...chains, ...cosmosKitChains]}
               wallets={[...keplrWallets, ...leapWallets]}
               walletConnectOptions={cosmosWalletConnectOptions} // required if `wallets` contains mobile wallets
               signerOptions={{

web/src/components/DepositCard/DepositCard.tsx

@@ -1,3 +1,4 @@
+import { Decimal } from "@cosmjs/math";
 import type React from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
@@ -10,10 +11,9 @@ import {
 } from "features/EthWallet";
 import { sendIbcTransfer, useIbcChainSelection } from "features/KeplrWallet";
 import { NotificationType, useNotifications } from "features/Notifications";
-import { Decimal } from "@cosmjs/math";
 
 export default function DepositCard(): React.ReactElement {
-  const { evmChains, ibcChains } = useConfig();
+  const { evmChains, cosmosChains } = useConfig();
   const { addNotification } = useNotifications();
 
   const {
@@ -45,7 +45,7 @@ export default function DepositCard(): React.ReactElement {
     isLoadingIbcBalance,
     connectCosmosWallet,
     getCosmosSigningClient,
-  } = useIbcChainSelection(ibcChains);
+  } = useIbcChainSelection(cosmosChains);
 
   // ensure cosmos wallet connection when selected ibc chain changes
   useEffect(() => {
@@ -87,9 +87,9 @@ export default function DepositCard(): React.ReactElement {
     useState<string>("");
   const [isRecipientAddressEditable, setIsRecipientAddressEditable] =
     useState<boolean>(false);
-  const handleEditRecipientClick = () => {
+  const handleEditRecipientClick = useCallback(() => {
     setIsRecipientAddressEditable(!isRecipientAddressEditable);
-  };
+  }, [isRecipientAddressEditable]);
   const handleEditRecipientSave = () => {
     setIsRecipientAddressEditable(false);
     // reset evmWalletState when user manually enters address

web/src/components/WithdrawCard/WithdrawCard.tsx

@@ -1,20 +1,20 @@
 import type React from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { useConfig as useWagmiConfig } from "wagmi";
 
-import { useConfig } from "config";
 import AnimatedArrowSpacer from "components/AnimatedDownArrowSpacer/AnimatedDownArrowSpacer";
 import Dropdown from "components/Dropdown/Dropdown";
+import { useConfig } from "config";
 import {
   AddERC20ToWalletButton,
   createWithdrawerService,
   useEvmChainSelection,
 } from "features/EthWallet";
 import { useIbcChainSelection } from "features/KeplrWallet";
 import { NotificationType, useNotifications } from "features/Notifications";
-import { useConfig as useWagmiConfig } from "wagmi";
 
 export default function WithdrawCard(): React.ReactElement {
-  const { evmChains, ibcChains } = useConfig();
+  const { evmChains, cosmosChains } = useConfig();
   const wagmiConfig = useWagmiConfig();
   const { addNotification } = useNotifications();
 
@@ -47,7 +47,7 @@ export default function WithdrawCard(): React.ReactElement {
     isLoadingIbcBalance,
     resetState: resetIbcWalletState,
     connectCosmosWallet,
-  } = useIbcChainSelection(ibcChains);
+  } = useIbcChainSelection(cosmosChains);
 
   // the ibc currency selection is controlled by the sender's chosen evm currency,
   // and should be updated when an ibc currency or ibc chain is selected
@@ -82,9 +82,9 @@ export default function WithdrawCard(): React.ReactElement {
     useState<string>("");
   const [isRecipientAddressEditable, setIsRecipientAddressEditable] =
     useState<boolean>(false);
-  const handleEditRecipientClick = () => {
+  const handleEditRecipientClick = useCallback(() => {
     setIsRecipientAddressEditable(!isRecipientAddressEditable);
-  };
+  }, [isRecipientAddressEditable]);
   const handleEditRecipientSave = () => {
     setIsRecipientAddressEditable(false);
     // reset ibcWalletState when user manually enters address

web/src/config/chainConfigs/ChainConfigsDawn.ts

@@ -1,8 +1,8 @@
 import type {
-  EvmChainInfo,
-  EvmChains,
   CosmosChainInfo,
   CosmosChains,
+  EvmChainInfo,
+  EvmChains,
 } from "./types";
 
 const CelestiaChainInfo: CosmosChainInfo = {
@@ -268,7 +268,7 @@ const NeutronChainInfo: CosmosChainInfo = {
   iconClass: "i-neutron",
 };
 
-export const ibcChains: CosmosChains = {
+export const cosmosChains: CosmosChains = {
   "Celestia Mocha-4": CelestiaChainInfo,
   "Noble Testnet": NobleChainInfo,
   "Neutron Testnet": NeutronChainInfo,

web/src/config/chainConfigs/ChainConfigsDusk.ts

@@ -1,8 +1,8 @@
 import type {
-  EvmChainInfo,
-  EvmChains,
   CosmosChainInfo,
   CosmosChains,
+  EvmChainInfo,
+  EvmChains,
 } from "./types";
 
 const CelestiaChainInfo: CosmosChainInfo = {
@@ -183,7 +183,7 @@ const NobleChainInfo: CosmosChainInfo = {
   iconClass: "i-noble",
 };
 
-export const ibcChains: CosmosChains = {
+export const cosmosChains: CosmosChains = {
   "Celestia Mocha-4": CelestiaChainInfo,
   "Noble Testnet": NobleChainInfo,
 };

web/src/config/chainConfigs/ChainConfigsLocal.ts

@@ -1,8 +1,8 @@
 import type {
-  EvmChainInfo,
-  EvmChains,
   CosmosChainInfo,
   CosmosChains,
+  EvmChainInfo,
+  EvmChains,
 } from "./types";
 
 const CelestiaChainInfo: CosmosChainInfo = {
@@ -177,7 +177,7 @@ const NobleChainInfo: CosmosChainInfo = {
   iconClass: "i-noble",
 };
 
-export const ibcChains: CosmosChains = {
+export const cosmosChains: CosmosChains = {
   "Celestia Local": CelestiaChainInfo,
   "Noble Local": NobleChainInfo,
 };

web/src/config/chainConfigs/ChainConfigsMainnet.ts

@@ -1,8 +1,8 @@
 import type {
-  EvmChainInfo,
-  EvmChains,
   CosmosChainInfo,
   CosmosChains,
+  EvmChainInfo,
+  EvmChains,
 } from "./types";
 
 const CelestiaChainInfo: CosmosChainInfo = {
@@ -229,7 +229,7 @@ const StrideChainInfo: CosmosChainInfo = {
   iconClass: "i-stride",
 };
 
-export const ibcChains: CosmosChains = {
+export const cosmosChains: CosmosChains = {
   Celestia: CelestiaChainInfo,
   Noble: NobleChainInfo,
   Osmosis: OsmosisChainInfo,

web/src/config/chainConfigs/index.ts

@@ -1,35 +1,35 @@
-import { type EvmChains, getEnvVariable, type CosmosChains } from "config";
+import { type CosmosChains, type EvmChains, getEnvVariable } from "config";
 
 import {
-  evmChains as localEvmChains,
-  ibcChains as localIbcChains,
-} from "./ChainConfigsLocal";
+  cosmosChains as dawnCosmosChains,
+  evmChains as dawnEvmChains,
+} from "./ChainConfigsDawn";
 import {
+  cosmosChains as duskCosmosChains,
   evmChains as duskEvmChains,
-  ibcChains as duskIbcChains,
 } from "./ChainConfigsDusk";
 import {
-  evmChains as dawnEvmChains,
-  ibcChains as dawnIbcChains,
-} from "./ChainConfigsDawn";
+  cosmosChains as localCosmosChains,
+  evmChains as localEvmChains,
+} from "./ChainConfigsLocal";
 import {
+  cosmosChains as mainnetCosmosChains,
   evmChains as mainnetEvmChains,
-  ibcChains as mainnetIbcChains,
 } from "./ChainConfigsMainnet";
 
 // Map of environment labels to their chain configurations
 const ENV_CHAIN_CONFIGS = {
-  local: { evm: localEvmChains, ibc: localIbcChains },
-  dusk: { evm: duskEvmChains, ibc: duskIbcChains },
-  dawn: { evm: dawnEvmChains, ibc: dawnIbcChains },
-  mainnet: { evm: mainnetEvmChains, ibc: mainnetIbcChains },
+  local: { evm: localEvmChains, cosmos: localCosmosChains },
+  dusk: { evm: duskEvmChains, cosmos: duskCosmosChains },
+  dawn: { evm: dawnEvmChains, cosmos: dawnCosmosChains },
+  mainnet: { evm: mainnetEvmChains, cosmos: mainnetCosmosChains },
 } as const;
 
 type Environment = keyof typeof ENV_CHAIN_CONFIGS;
 
 type ChainConfigs = {
   evm: EvmChains;
-  ibc: CosmosChains;
+  cosmos: CosmosChains;
 };
 
 /**
@@ -45,11 +45,11 @@ export function getEnvChainConfigs(): ChainConfigs {
   // copy baseConfig to result
   const result = { ...baseConfig };
 
-  // try to get IBC chains override
+  // try to get cosmos chains override
   try {
-    const ibcChainsOverride = getEnvVariable("REACT_APP_IBC_CHAINS");
-    if (ibcChainsOverride) {
-      result.ibc = JSON.parse(ibcChainsOverride);
+    const cosmosChainsOverride = getEnvVariable("REACT_APP_IBC_CHAINS");
+    if (cosmosChainsOverride) {
+      result.cosmos = JSON.parse(cosmosChainsOverride);
       console.debug("Using IBC chains override from environment");
     }
   } catch (e) {

web/src/config/chainConfigs/types.ts

@@ -134,7 +134,7 @@ export interface CosmosCurrency {
 export type FeeCurrency = WithGasPriceStep<CosmosCurrency>;
 
 /**
- * Represents information about a currency used in an IBC chain.
+ * Represents information about a currency that uses IBC.
  */
 export interface IbcCurrency extends CosmosCurrency {
   // The ibc channel used to send this currency

web/src/config/config.test.ts

@@ -31,7 +31,7 @@ describe("Chain Configs", () => {
   });
 
   describe("getEnvChainConfigs", () => {
-    const mockIbcChains: CosmosChains = {
+    const mockCosmosChains: CosmosChains = {
       "Test Chain": {
         chainId: "test-1",
         chainName: "Test Chain",
@@ -100,7 +100,7 @@ describe("Chain Configs", () => {
 
         const config = getEnvChainConfigs();
         expect(config).toBeDefined();
-        expect(config.ibc).toBeDefined();
+        expect(config.cosmos).toBeDefined();
         expect(config.evm).toBeDefined();
       }
     });
@@ -110,12 +110,12 @@ describe("Chain Configs", () => {
       (getEnvVariable as jest.Mock).mockImplementation((key: string) => {
         if (key === "REACT_APP_ENV") return "local";
         if (key === "REACT_APP_IBC_CHAINS")
-          return JSON.stringify(mockIbcChains);
+          return JSON.stringify(mockCosmosChains);
         throw new Error(`${key} not set`);
       });
 
       const config = getEnvChainConfigs();
-      expect(config.ibc).toEqual(mockIbcChains);
+      expect(config.cosmos).toEqual(mockCosmosChains);
       // EVM chains should still be from local config
       expect(config.evm.Flame.chainName).toEqual("Flame (local)");
     });
@@ -132,22 +132,24 @@ describe("Chain Configs", () => {
       const config = getEnvChainConfigs();
       expect(config.evm).toEqual(mockEvmChains);
       // IBC chains should still be from local config
-      expect(config.ibc["Celestia Local"].chainName).toEqual("Celestia Local");
+      expect(config.cosmos["Celestia Local"].chainName).toEqual(
+        "Celestia Local",
+      );
     });
 
     it("should override both chains when both environment variables are set", () => {
       // set up environment
       (getEnvVariable as jest.Mock).mockImplementation((key: string) => {
         if (key === "REACT_APP_ENV") return "local";
         if (key === "REACT_APP_IBC_CHAINS")
-          return JSON.stringify(mockIbcChains);
+          return JSON.stringify(mockCosmosChains);
         if (key === "REACT_APP_EVM_CHAINS")
           return JSON.stringify(mockEvmChains);
         throw new Error(`${key} not set`);
       });
 
       const config = getEnvChainConfigs();
-      expect(config.ibc).toEqual(mockIbcChains);
+      expect(config.cosmos).toEqual(mockCosmosChains);
       expect(config.evm).toEqual(mockEvmChains);
     });
 
@@ -162,7 +164,9 @@ describe("Chain Configs", () => {
 
       const config = getEnvChainConfigs();
       // should fall back to local config
-      expect(config.ibc["Celestia Local"].chainName).toEqual("Celestia Local");
+      expect(config.cosmos["Celestia Local"].chainName).toEqual(
+        "Celestia Local",
+      );
       expect(config.evm.Flame.chainName).toEqual("Flame (local)");
     });
 
@@ -171,13 +175,13 @@ describe("Chain Configs", () => {
       (getEnvVariable as jest.Mock).mockImplementation((key: string) => {
         if (key === "REACT_APP_ENV") return "local";
         if (key === "REACT_APP_IBC_CHAINS")
-          return JSON.stringify(mockIbcChains);
+          return JSON.stringify(mockCosmosChains);
         if (key === "REACT_APP_EVM_CHAINS") return "invalid json";
         throw new Error(`${key} not set`);
       });
 
       const config = getEnvChainConfigs();
-      expect(config.ibc).toEqual(mockIbcChains); // should use override
+      expect(config.cosmos).toEqual(mockCosmosChains); // should use override
       expect(config.evm.Flame.chainName).toEqual("Flame (local)"); // should fall back to local config
     });
   });

web/src/config/contexts/ConfigContext.test.tsx

@@ -1,5 +1,5 @@
-import type React from "react";
 import { render, screen } from "@testing-library/react";
+import type React from "react";
 
 import { ConfigContextProvider } from "config/contexts/ConfigContext";
 import { useConfig } from "config/hooks/useConfig";