From 67fb40db1ef35cf2bdae67e564c0d5c8e8da99dc Mon Sep 17 00:00:00 2001
From: jesse snyder <jessetsnyder@gmail.com>
Date: Wed, 4 Sep 2024 17:49:51 -0600
Subject: [PATCH] Refactor/chain config (#16)

* use first ibc chain as default selection

* use correct denom envar

* use selectedIbcChain not envar

* only need memo in msgIBCTransfer

* cleanup before change

* put defaults in ts files. can override with envar
---
 web/.env.example                              |  27 +--
 web/config-overrides.js                       |   1 +
 .../components/DepositCard/DepositCard.tsx    |   7 +-
 web/src/components/Dropdown/Dropdown.tsx      |  13 +-
 .../components/WithdrawCard/WithdrawCard.tsx  |   3 +-
 web/src/config/chainConfigs/dev/.gitkeep      |   0
 web/src/config/chainConfigs/dusk.ts           |  85 +++++++++
 web/src/config/chainConfigs/local.ts          |  86 ++++++++++
 web/src/config/chains.ts                      | 161 ++++--------------
 web/src/config/index.ts                       |  17 +-
 .../hooks/useIbcChainSelection.ts             |   7 +-
 web/src/services/ibc.ts                       |  17 +-
 web/src/utils/index.test.ts                   |  23 +--
 web/src/utils/index.ts                        |  17 +-
 14 files changed, 261 insertions(+), 203 deletions(-)
 delete mode 100644 web/src/config/chainConfigs/dev/.gitkeep
 create mode 100644 web/src/config/chainConfigs/dusk.ts
 create mode 100644 web/src/config/chainConfigs/local.ts

diff --git a/web/.env.example b/web/.env.example
index b01183c..a79d20c 100644
--- a/web/.env.example
+++ b/web/.env.example
@@ -3,30 +3,7 @@ REACT_APP_VERSION=$npm_package_version
 
 # bech32m address for the sequencer bridge account
 REACT_APP_SEQUENCER_BRIDGE_ACCOUNT=astria1d7zjjljc0dsmxa545xkpwxym86g8uvvwhtezcr
-REACT_APP_SEQUENCER_BRIDGE_DENOM=utia
 REACT_APP_EVM_WITHDRAWER_CONTRACT_ADDRESS=0xA58639fB5458e65E4fA917FF951C390292C24A15
 
-# list of ibc chains
-REACT_APP_IBC_CHAINS="CELESTIA"
-
-# celestia config for local development
-REACT_APP_CELESTIA_CHAIN_ID="celestia-local-0"
-REACT_APP_CELESTIA_CHAIN_NAME="celestia-local-0"
-REACT_APP_CELESTIA_RPC_ENDPOINT="http://rpc.app.celestia.localdev.me"
-REACT_APP_CELESTIA_REST_ENDPOINT="http://rest.app.celestia.localdev.me"
-REACT_APP_CELESTIA_STAKE_CURRENCY_COIN_DENOM="TIA"
-REACT_APP_CELESTIA_STAKE_CURRENCY_COIN_MINIMAL_DENOM="utia"
-REACT_APP_CELESTIA_STAKE_CURRENCY_COIN_DECIMALS=6
-REACT_APP_CELESTIA_BIP_44_COIN_TYPE=118
-REACT_APP_CELESTIA_BECH32_PREFIX=celestia
-REACT_APP_CELESTIA_CURRENCIES_COIN_DENOM="TIA"
-REACT_APP_CELESTIA_CURRENCIES_COIN_MINIMAL_DENOM="utia"
-REACT_APP_CELESTIA_CURRENCIES_COIN_DECIMALS=6
-REACT_APP_CELESTIA_FEE_CURRENCIES_COIN_DENOM="TIA"
-REACT_APP_CELESTIA_FEE_CURRENCIES_COIN_MINIMAL_DENOM="utia"
-REACT_APP_CELESTIA_FEE_CURRENCIES_COIN_DECIMALS=6
-REACT_APP_CELESTIA_FEE_CURRENCIES_GAS_PRICE_STEP_LOW=0.01
-REACT_APP_CELESTIA_FEE_CURRENCIES_GAS_PRICE_STEP_AVERAGE=0.02
-REACT_APP_CELESTIA_FEE_CURRENCIES_GAS_PRICE_STEP_HIGH=0.1
-REACT_APP_CELESTIA_IBC_CHANNEL="channel-110"
-REACT_APP_CELESTIA_ICON_SOURCE_URL="https://placehold.co/60x60/EEE/31343C"
+# can set custom ibc chains via json string
+REACT_APP_IBC_CHAINS=
diff --git a/web/config-overrides.js b/web/config-overrides.js
index 30b25f7..0c94ebe 100644
--- a/web/config-overrides.js
+++ b/web/config-overrides.js
@@ -2,6 +2,7 @@ const webpack = require("webpack");
 
 // This file is used by react-app-rewired.
 // Needed to browserify crypto for some cosmos key stuff I believe.
+// FIXME - is this still needed?
 module.exports = function override(config) {
   const fallback = config.resolve.fallback || {};
   Object.assign(fallback, {
diff --git a/web/src/components/DepositCard/DepositCard.tsx b/web/src/components/DepositCard/DepositCard.tsx
index c55ab74..3855af1 100644
--- a/web/src/components/DepositCard/DepositCard.tsx
+++ b/web/src/components/DepositCard/DepositCard.tsx
@@ -9,7 +9,7 @@ import { useEthWallet } from "features/EthWallet/hooks/useEthWallet";
 import { getBalance, sendIbcTransfer } from "services/ibc";
 import { getKeplrFromWindow } from "services/keplr";
 import { useIbcChainSelection } from "features/IbcChainSelector/hooks/useIbcChainSelection";
-import Dropdown from "../Dropdown/Dropdown";
+import Dropdown from "components/Dropdown/Dropdown";
 
 export default function DepositCard(): React.ReactElement {
   const { addNotification } = useContext(NotificationsContext);
@@ -211,6 +211,7 @@ export default function DepositCard(): React.ReactElement {
             <Dropdown
               placeholder="Select a chain"
               options={ibcChainsOptions}
+              defaultOption={ibcChainsOptions[0]}
               onSelect={(selected) => selectIbcChain(selected)}
             />
             <button
@@ -283,9 +284,7 @@ export default function DepositCard(): React.ReactElement {
               disabled={recipientAddress !== ""}
               onClick={() => connectEVMWallet()}
             >
-              {recipientAddress
-                ? "Connected to EVM Wallet"
-                : "Connect EVM Wallet"}
+              {userAccount ? "Connected to EVM Wallet" : "Connect EVM Wallet"}
             </button>
             {!isRecipientAddressValid && hasTouchedForm && (
               <p className="help is-danger mt-2">Must be a valid EVM address</p>
diff --git a/web/src/components/Dropdown/Dropdown.tsx b/web/src/components/Dropdown/Dropdown.tsx
index 27c89f9..3eac10c 100644
--- a/web/src/components/Dropdown/Dropdown.tsx
+++ b/web/src/components/Dropdown/Dropdown.tsx
@@ -1,5 +1,5 @@
 import type React from "react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 export interface DropdownOption<T> {
   label: string;
@@ -10,16 +10,25 @@ interface DropdownProps<T> {
   options: DropdownOption<T>[];
   onSelect: (value: T) => void;
   placeholder?: string;
+  defaultOption?: DropdownOption<T>;
 }
 
 function Dropdown<T>({
   options,
   onSelect,
   placeholder = "Select an option",
+  defaultOption,
 }: DropdownProps<T>) {
   const [isActive, setIsActive] = useState(false);
   const [selectedOption, setSelectedOption] =
-    useState<DropdownOption<T> | null>(null);
+    useState<DropdownOption<T> | null>(defaultOption || null);
+
+  useEffect(() => {
+    if (defaultOption) {
+      setSelectedOption(defaultOption);
+      onSelect(defaultOption.value);
+    }
+  }, [defaultOption, onSelect]);
 
   const handleSelect = (option: DropdownOption<T>) => {
     setSelectedOption(option);
diff --git a/web/src/components/WithdrawCard/WithdrawCard.tsx b/web/src/components/WithdrawCard/WithdrawCard.tsx
index e5688be..1a95fc0 100644
--- a/web/src/components/WithdrawCard/WithdrawCard.tsx
+++ b/web/src/components/WithdrawCard/WithdrawCard.tsx
@@ -10,7 +10,7 @@ import {
   getAstriaWithdrawerService,
 } from "features/EthWallet";
 import { useIbcChainSelection } from "features/IbcChainSelector";
-import Dropdown from "../Dropdown/Dropdown";
+import Dropdown from "components/Dropdown/Dropdown";
 
 export default function WithdrawCard(): React.ReactElement {
   const { addNotification } = useContext(NotificationsContext);
@@ -256,6 +256,7 @@ export default function WithdrawCard(): React.ReactElement {
               placeholder="Select a chain"
               options={ibcChainsOptions}
               onSelect={(selected) => selectIbcChain(selected)}
+              defaultOption={ibcChainsOptions[0]}
             />
             <button
               type="button"
diff --git a/web/src/config/chainConfigs/dev/.gitkeep b/web/src/config/chainConfigs/dev/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/web/src/config/chainConfigs/dusk.ts b/web/src/config/chainConfigs/dusk.ts
new file mode 100644
index 0000000..7133226
--- /dev/null
+++ b/web/src/config/chainConfigs/dusk.ts
@@ -0,0 +1,85 @@
+import type { IbcChainInfo, IbcChains } from "../chains";
+
+const CelestiaChainInfo: IbcChainInfo = {
+  // Chain-id of the celestia chain.
+  chainId: "mocha-4",
+  // The name of the chain to be displayed to the user.
+  chainName: "Celestia Mocha-4",
+  // RPC endpoint of the chain
+  rpc: "wss://rpc-mocha.pops.one",
+  // REST endpoint of the chain.
+  rest: "https://api-mocha.pops.one",
+  // Staking coin information
+  stakeCurrency: {
+    // Coin denomination to be displayed to the user.
+    coinDenom: "TIA",
+    // Actual denom (i.e. uatom, uscrt) used by the blockchain.
+    coinMinimalDenom: "utia",
+    // # of decimal points to convert minimal denomination to user-facing denomination.
+    coinDecimals: 6,
+    // (Optional) Keplr can show the fiat value of the coin if a coingecko id is provided.
+    // You can get id from https://api.coingecko.com/api/v3/coins/list if it is listed.
+    // coinGeckoId: ""
+  },
+  // (Optional) If you have a wallet webpage used to stake the coin then provide the url to the website in `walletUrlForStaking`.
+  // The 'stake' button in Keplr extension will link to the webpage.
+  // walletUrlForStaking: "",
+  // The BIP44 path.
+  bip44: {
+    // You can only set the coin type of BIP44.
+    // 'Purpose' is fixed to 44.
+    coinType: 118,
+  },
+  // The address prefix of the chain.
+  bech32Config: {
+    bech32PrefixAccAddr: "celestia",
+    bech32PrefixAccPub: "celestiapub",
+    bech32PrefixConsAddr: "celestiavalcons",
+    bech32PrefixConsPub: "celestiavalconspub",
+    bech32PrefixValAddr: "celestiavaloper",
+    bech32PrefixValPub: "celestiavaloperpub",
+  },
+  // List of all coin/tokens used in this chain.
+  currencies: [
+    {
+      // Coin denomination to be displayed to the user.
+      coinDenom: "TIA",
+      // Actual denom (i.e. uatom, uscrt) used by the blockchain.
+      coinMinimalDenom: "utia",
+      // # of decimal points to convert minimal denomination to user-facing denomination.
+      coinDecimals: 6,
+      // (Optional) Keplr can show the fiat value of the coin if a coingecko id is provided.
+      // You can get id from https://api.coingecko.com/api/v3/coins/list if it is listed.
+      // coinGeckoId: ""
+    },
+  ],
+  // List of coin/tokens used as a fee token in this chain.
+  feeCurrencies: [
+    {
+      // Coin denomination to be displayed to the user.
+      coinDenom: "TIA",
+      // Actual denom (i.e. nria, uscrt) used by the blockchain.
+      coinMinimalDenom: "utia",
+      // # of decimal points to convert minimal denomination to user-facing denomination.
+      coinDecimals: 6,
+      // (Optional) Keplr can show the fiat value of the coin if a coingecko id is provided.
+      // You can get id from https://api.coingecko.com/api/v3/coins/list if it is listed.
+      // coinGeckoId: ""
+      // (Optional) This is used to set the fee of the transaction.
+      // If this field is not provided and suggesting chain is not natively integrated, Keplr extension will set the Keplr default gas price (low: 0.01, average: 0.025, high: 0.04).
+      // Currently, Keplr doesn't support dynamic calculation of the gas prices based on on-chain data.
+      // Make sure that the gas prices are higher than the minimum gas prices accepted by chain validators and RPC/REST endpoint.
+      gasPriceStep: {
+        low: 0.01,
+        average: 0.02,
+        high: 0.1,
+      },
+    },
+  ],
+  ibcChannel: "channel-110",
+  iconSourceUrl: "https://placehold.co/60x60/EEE/31343C",
+};
+
+export const ibcChains: IbcChains = {
+  "Celestia Mocha-4": CelestiaChainInfo,
+};
diff --git a/web/src/config/chainConfigs/local.ts b/web/src/config/chainConfigs/local.ts
new file mode 100644
index 0000000..1789f87
--- /dev/null
+++ b/web/src/config/chainConfigs/local.ts
@@ -0,0 +1,86 @@
+import type { IbcChainInfo, IbcChains } from "../chains";
+
+const CelestiaChainInfo: IbcChainInfo = {
+  // Chain-id of the celestia chain.
+  chainId: "celestia-local-0",
+  // The name of the chain to be displayed to the user.
+  chainName: "celestia-local-0",
+  // RPC endpoint of the chain
+  rpc: "http://rpc.app.celestia.localdev.me",
+  // REST endpoint of the chain.
+  rest: "http://rest.app.celestia.localdev.me",
+  // Staking coin information
+  stakeCurrency: {
+    // Coin denomination to be displayed to the user.
+    coinDenom: "TIA",
+    // Actual denom (i.e. uatom, uscrt) used by the blockchain.
+    coinMinimalDenom: "utia",
+    // # of decimal points to convert minimal denomination to user-facing denomination.
+    coinDecimals: 6,
+    // (Optional) Keplr can show the fiat value of the coin if a coingecko id is provided.
+    // You can get id from https://api.coingecko.com/api/v3/coins/list if it is listed.
+    // coinGeckoId: ""
+  },
+  // (Optional) If you have a wallet webpage used to stake the coin then provide the url to the website in `walletUrlForStaking`.
+  // The 'stake' button in Keplr extension will link to the webpage.
+  // walletUrlForStaking: "",
+  // The BIP44 path.
+  bip44: {
+    // You can only set the coin type of BIP44.
+    // 'Purpose' is fixed to 44.
+    coinType: 118,
+  },
+  // The address prefix of the chain.
+  bech32Config: {
+    bech32PrefixAccAddr: "celestia",
+    bech32PrefixAccPub: "celestiapub",
+    bech32PrefixConsAddr: "celestiavalcons",
+    bech32PrefixConsPub: "celestiavalconspub",
+    bech32PrefixValAddr: "celestiavaloper",
+    bech32PrefixValPub: "celestiavaloperpub",
+  },
+  // List of all coin/tokens used in this chain.
+  currencies: [
+    {
+      // Coin denomination to be displayed to the user.
+      coinDenom: "TIA",
+      // Actual denom (i.e. uatom, uscrt) used by the blockchain.
+      coinMinimalDenom: "utia",
+      // # of decimal points to convert minimal denomination to user-facing denomination.
+      coinDecimals: 6,
+      // (Optional) Keplr can show the fiat value of the coin if a coingecko id is provided.
+      // You can get id from https://api.coingecko.com/api/v3/coins/list if it is listed.
+      // coinGeckoId: ""
+    },
+  ],
+  // List of coin/tokens used as a fee token in this chain.
+  feeCurrencies: [
+    {
+      // Coin denomination to be displayed to the user.
+      coinDenom: "TIA",
+      // Actual denom (i.e. nria, uscrt) used by the blockchain.
+      coinMinimalDenom: "utia",
+      // # of decimal points to convert minimal denomination to user-facing denomination.
+      coinDecimals: 6,
+      // (Optional) Keplr can show the fiat value of the coin if a coingecko id is provided.
+      // You can get id from https://api.coingecko.com/api/v3/coins/list if it is listed.
+      // coinGeckoId: ""
+      // (Optional) This is used to set the fee of the transaction.
+      // If this field is not provided and suggesting chain is not natively integrated, Keplr extension will set the Keplr default gas price (low: 0.01, average: 0.025, high: 0.04).
+      // Currently, Keplr doesn't support dynamic calculation of the gas prices based on on-chain data.
+      // Make sure that the gas prices are higher than the minimum gas prices accepted by chain validators and RPC/REST endpoint.
+      gasPriceStep: {
+        low: 0.01,
+        average: 0.02,
+        high: 0.1,
+      },
+    },
+  ],
+  ibcChannel: "channel-0",
+  // TODO - chain icons
+  iconSourceUrl: "https://placehold.co/60x60/EEE/31343C",
+};
+
+export const ibcChains: IbcChains = {
+  "Celestia Local": CelestiaChainInfo,
+};
diff --git a/web/src/config/chains.ts b/web/src/config/chains.ts
index bda09ed..816cf1a 100644
--- a/web/src/config/chains.ts
+++ b/web/src/config/chains.ts
@@ -1,142 +1,47 @@
 import type { ChainInfo } from "@keplr-wallet/types";
-import { capitalize, getEnvVariable } from "utils";
-
+import { getEnvVariable } from "utils";
+import { ibcChains as localIbcChains } from "./chainConfigs/local";
+import { ibcChains as duskIbcChains } from "./chainConfigs/dusk";
+
+/**
+ * Represents information about an IBC (Inter-Blockchain Communication) chain.
+ * This class extends the base class ChainInfo.
+ *
+ * @typedef {object} IbcChainInfo
+ * @property {string} ibcChannel - The name of the IBC channel for this chain.
+ * @property {string} iconSourceUrl - The URL to the source of the chain's icon.
+ * @extends {ChainInfo}
+ */
 export type IbcChainInfo = {
   ibcChannel: string;
   iconSourceUrl: string;
 } & ChainInfo;
 
-// IbcChains maps labels to IbcChainInfo objects
+// IbcChains type maps labels to IbcChainInfo objects
 export type IbcChains = {
   [label: string]: IbcChainInfo;
 };
 
-export function generateChainInfo(envVars: {
-  CHAIN_ID: string;
-  CHAIN_NAME: string;
-  RPC_ENDPOINT: string;
-  REST_ENDPOINT: string;
-  STAKE_CURRENCY_COIN_DENOM: string;
-  STAKE_CURRENCY_COIN_MINIMAL_DENOM: string;
-  STAKE_CURRENCY_COIN_DECIMALS: string;
-  BIP_44_COIN_TYPE: string;
-  BECH32_PREFIX: string;
-  CURRENCIES_COIN_DENOM: string;
-  CURRENCIES_COIN_MINIMAL_DENOM: string;
-  CURRENCIES_COIN_DECIMALS: string;
-  FEE_CURRENCIES_COIN_DENOM: string;
-  FEE_CURRENCIES_COIN_MINIMAL_DENOM: string;
-  FEE_CURRENCIES_COIN_DECIMALS: string;
-  FEE_CURRENCIES_GAS_PRICE_STEP_LOW: string;
-  FEE_CURRENCIES_GAS_PRICE_STEP_AVERAGE: string;
-  FEE_CURRENCIES_GAS_PRICE_STEP_HIGH: string;
-  IBC_CHANNEL: string;
-  ICON_SOURCE_URL: string;
-}): IbcChainInfo {
-  return {
-    chainId: envVars.CHAIN_ID,
-    chainName: envVars.CHAIN_NAME,
-    rpc: envVars.RPC_ENDPOINT,
-    rest: envVars.REST_ENDPOINT,
-    ibcChannel: envVars.IBC_CHANNEL,
-    iconSourceUrl: envVars.ICON_SOURCE_URL,
-    stakeCurrency: {
-      coinDenom: envVars.STAKE_CURRENCY_COIN_DENOM,
-      coinMinimalDenom: envVars.STAKE_CURRENCY_COIN_MINIMAL_DENOM,
-      coinDecimals: Number.parseInt(envVars.STAKE_CURRENCY_COIN_DECIMALS, 10),
-    },
-    bip44: {
-      coinType: Number.parseInt(envVars.BIP_44_COIN_TYPE, 10),
-    },
-    bech32Config: {
-      bech32PrefixAccAddr: envVars.BECH32_PREFIX,
-      bech32PrefixAccPub: `${envVars.BECH32_PREFIX}pub`,
-      bech32PrefixConsAddr: `${envVars.BECH32_PREFIX}valcons`,
-      bech32PrefixConsPub: `${envVars.BECH32_PREFIX}valconspub`,
-      bech32PrefixValAddr: `${envVars.BECH32_PREFIX}valoper`,
-      bech32PrefixValPub: `${envVars.BECH32_PREFIX}valoperpub`,
-    },
-    currencies: [
-      {
-        coinDenom: envVars.CURRENCIES_COIN_DENOM,
-        coinMinimalDenom: envVars.CURRENCIES_COIN_MINIMAL_DENOM,
-        coinDecimals: Number.parseInt(envVars.CURRENCIES_COIN_DECIMALS, 10),
-      },
-    ],
-    feeCurrencies: [
-      {
-        coinDenom: envVars.FEE_CURRENCIES_COIN_DENOM,
-        coinMinimalDenom: envVars.FEE_CURRENCIES_COIN_MINIMAL_DENOM,
-        coinDecimals: Number.parseInt(envVars.FEE_CURRENCIES_COIN_DECIMALS, 10),
-        gasPriceStep: {
-          low: Number.parseFloat(envVars.FEE_CURRENCIES_GAS_PRICE_STEP_LOW),
-          average: Number.parseFloat(
-            envVars.FEE_CURRENCIES_GAS_PRICE_STEP_AVERAGE,
-          ),
-          high: Number.parseFloat(envVars.FEE_CURRENCIES_GAS_PRICE_STEP_HIGH),
-        },
-      },
-    ],
-  };
-}
-
-export function parseMultiChainEnvVars(): IbcChains {
-  const chainConfigs: IbcChains = {};
-  const chainIds = getEnvVariable("REACT_APP_IBC_CHAINS")?.split(",");
-
-  for (const chainId of chainIds) {
-    const prefix = `REACT_APP_${chainId}`;
-    const envVars = {
-      CHAIN_ID: getEnvVariable(`${prefix}_CHAIN_ID`),
-      CHAIN_NAME: getEnvVariable(`${prefix}_CHAIN_NAME`),
-      RPC_ENDPOINT: getEnvVariable(`${prefix}_RPC_ENDPOINT`),
-      REST_ENDPOINT: getEnvVariable(`${prefix}_REST_ENDPOINT`),
-      IBC_CHANNEL: getEnvVariable(`${prefix}_IBC_CHANNEL`),
-      ICON_SOURCE_URL: getEnvVariable(`${prefix}_ICON_SOURCE_URL`),
-      STAKE_CURRENCY_COIN_DENOM: getEnvVariable(
-        `${prefix}_STAKE_CURRENCY_COIN_DENOM`,
-      ),
-      STAKE_CURRENCY_COIN_MINIMAL_DENOM: getEnvVariable(
-        `${prefix}_STAKE_CURRENCY_COIN_MINIMAL_DENOM`,
-      ),
-      STAKE_CURRENCY_COIN_DECIMALS: getEnvVariable(
-        `${prefix}_STAKE_CURRENCY_COIN_DECIMALS`,
-      ),
-      BIP_44_COIN_TYPE: getEnvVariable(`${prefix}_BIP_44_COIN_TYPE`),
-      BECH32_PREFIX: getEnvVariable(`${prefix}_BECH32_PREFIX`),
-      CURRENCIES_COIN_DENOM: getEnvVariable(`${prefix}_CURRENCIES_COIN_DENOM`),
-      CURRENCIES_COIN_MINIMAL_DENOM: getEnvVariable(
-        `${prefix}_CURRENCIES_COIN_MINIMAL_DENOM`,
-      ),
-      CURRENCIES_COIN_DECIMALS: getEnvVariable(
-        `${prefix}_CURRENCIES_COIN_DECIMALS`,
-      ),
-      FEE_CURRENCIES_COIN_DENOM: getEnvVariable(
-        `${prefix}_FEE_CURRENCIES_COIN_DENOM`,
-      ),
-      FEE_CURRENCIES_COIN_MINIMAL_DENOM: getEnvVariable(
-        `${prefix}_FEE_CURRENCIES_COIN_MINIMAL_DENOM`,
-      ),
-      FEE_CURRENCIES_COIN_DECIMALS: getEnvVariable(
-        `${prefix}_FEE_CURRENCIES_COIN_DECIMALS`,
-      ),
-      FEE_CURRENCIES_GAS_PRICE_STEP_LOW: getEnvVariable(
-        `${prefix}_FEE_CURRENCIES_GAS_PRICE_STEP_LOW`,
-      ),
-      FEE_CURRENCIES_GAS_PRICE_STEP_AVERAGE: getEnvVariable(
-        `${prefix}_FEE_CURRENCIES_GAS_PRICE_STEP_AVERAGE`,
-      ),
-      FEE_CURRENCIES_GAS_PRICE_STEP_HIGH: getEnvVariable(
-        `${prefix}_FEE_CURRENCIES_GAS_PRICE_STEP_HIGH`,
-      ),
-    };
-
-    if (envVars.RPC_ENDPOINT && envVars.REST_ENDPOINT) {
-      chainConfigs[capitalize(chainId)] = generateChainInfo(envVars);
+/**
+ * Retrieves the IBC chains from the environment variable override or the default chain configurations,
+ * depending on the environment.
+ *
+ * @returns {IbcChains} - The IBC chains configuration.
+ */
+export function getIbcChains(): IbcChains {
+  // try to get the IBC chains from the environment variable override first
+  try {
+    const ibcChains = getEnvVariable("REACT_APP_IBC_CHAINS");
+    if (ibcChains) {
+      return JSON.parse(ibcChains);
     }
+  } catch (e) {
+    console.log("REACT_APP_IBC_CHAINS not set. Continuing...");
   }
 
-  return chainConfigs;
+  // get default chain configs based on REACT_APP_ENV
+  if (getEnvVariable("REACT_APP_ENV") === "dusk") {
+    return duskIbcChains;
+  }
+  return localIbcChains;
 }
-
-export const ChainConfigs = parseMultiChainEnvVars();
diff --git a/web/src/config/index.ts b/web/src/config/index.ts
index 96ddfd2..8273a45 100644
--- a/web/src/config/index.ts
+++ b/web/src/config/index.ts
@@ -1,11 +1,22 @@
-import { type IbcChains, parseMultiChainEnvVars } from "./chains";
+import { getIbcChains, type IbcChains } from "./chains";
 
+/**
+ * Represents the configuration object for the application.
+ *
+ * @typedef {Object} AppConfig
+ * @property {IbcChains} ibcChains - The configuration for IBC chains.
+ */
 export type AppConfig = {
   ibcChains: IbcChains;
 };
 
-export function getAppConfig() {
+/**
+ * Returns the application configuration.
+ *
+ * @return {AppConfig} The application configuration object.
+ */
+export function getAppConfig(): AppConfig {
   return {
-    ibcChains: parseMultiChainEnvVars(),
+    ibcChains: getIbcChains(),
   };
 }
diff --git a/web/src/features/IbcChainSelector/hooks/useIbcChainSelection.ts b/web/src/features/IbcChainSelector/hooks/useIbcChainSelection.ts
index c113ac6..9b5c7a0 100644
--- a/web/src/features/IbcChainSelector/hooks/useIbcChainSelection.ts
+++ b/web/src/features/IbcChainSelector/hooks/useIbcChainSelection.ts
@@ -1,6 +1,7 @@
-import { useState, useMemo } from "react";
+import { useMemo, useState } from "react";
 import type { DropdownOption } from "components/Dropdown/Dropdown";
-import { ChainConfigs, type IbcChainInfo } from "config/chains";
+import type { IbcChainInfo } from "config/chains";
+import { getAppConfig } from "config";
 
 export function useIbcChainSelection() {
   const [selectedIbcChain, setSelectedIbcChain] = useState<IbcChainInfo | null>(
@@ -8,7 +9,7 @@ export function useIbcChainSelection() {
   );
 
   const ibcChainsOptions = useMemo(() => {
-    return Object.entries(ChainConfigs).map(
+    return Object.entries(getAppConfig().ibcChains).map(
       ([chainLabel, chain]): DropdownOption<IbcChainInfo> => ({
         label: chainLabel,
         value: chain,
diff --git a/web/src/services/ibc.ts b/web/src/services/ibc.ts
index 177fef0..9a765c4 100644
--- a/web/src/services/ibc.ts
+++ b/web/src/services/ibc.ts
@@ -4,6 +4,14 @@ import { Dec } from "@keplr-wallet/unit";
 import type { IbcChainInfo } from "config/chains";
 import { getEnvVariable } from "utils";
 
+/**
+ * Send an IBC transfer from the selected chain to the recipient address.
+ * Set `memo` on the tx so the sequencer knows to bridge to an EVM chain.
+ * @param selectedIbcChain
+ * @param sender
+ * @param recipient
+ * @param amount
+ */
 export const sendIbcTransfer = async (
   selectedIbcChain: IbcChainInfo,
   sender: string,
@@ -30,12 +38,13 @@ export const sendIbcTransfer = async (
   const sequencer_bridge_account = getEnvVariable(
     "REACT_APP_SEQUENCER_BRIDGE_ACCOUNT",
   );
-  const denom = getEnvVariable("REACT_APP_SEQUENCER_BRIDGE_DENOM");
+  // TODO - does this need to be configurable in the ui?
+  const feeDenom = selectedIbcChain.feeCurrencies[0].coinMinimalDenom;
   const memo = JSON.stringify({ rollupDepositAddress: recipient });
   const fee = {
     amount: [
       {
-        denom: denom,
+        denom: feeDenom,
         amount: "0",
       },
     ],
@@ -48,7 +57,8 @@ export const sendIbcTransfer = async (
       sourcePort: "transfer",
       sourceChannel: selectedIbcChain.ibcChannel,
       token: {
-        denom: denom,
+        // TODO - should be configurable/selectable in the ui
+        denom: selectedIbcChain.currencies[0].coinMinimalDenom,
         amount: amount,
       },
       sender: sender,
@@ -66,7 +76,6 @@ export const sendIbcTransfer = async (
     account.address,
     [msgIBCTransfer],
     fee,
-    memo, // FIXME - is this memo needed after realizing we moved it to `value`?
   );
   console.log("Transaction result: ", result);
 };
diff --git a/web/src/utils/index.test.ts b/web/src/utils/index.test.ts
index 6202b80..88141bb 100644
--- a/web/src/utils/index.test.ts
+++ b/web/src/utils/index.test.ts
@@ -1,9 +1,4 @@
-import {
-  getEnvVariable,
-  formatBalance,
-  formatChainAsNum,
-  capitalize,
-} from "utils"; // Adjust the import path as needed
+import { getEnvVariable, formatBalance, formatChainAsNum } from "utils";
 
 describe("Utility Functions", () => {
   describe("getEnvVariable", () => {
@@ -45,20 +40,4 @@ describe("Utility Functions", () => {
       expect(formatChainAsNum("0x2710")).toBe(10000);
     });
   });
-
-  describe("capitalize", () => {
-    it("should capitalize the first letter of a string", () => {
-      expect(capitalize("hello")).toBe("Hello");
-      expect(capitalize("WORLD")).toBe("World");
-      expect(capitalize("tEsT")).toBe("Test");
-    });
-
-    it("should handle empty strings", () => {
-      expect(capitalize("")).toBe("");
-    });
-
-    it("should handle single-character strings", () => {
-      expect(capitalize("a")).toBe("A");
-    });
-  });
 });
diff --git a/web/src/utils/index.ts b/web/src/utils/index.ts
index 61d68b8..36ecdba 100644
--- a/web/src/utils/index.ts
+++ b/web/src/utils/index.ts
@@ -13,19 +13,14 @@ export function getEnvVariable(name: string): string {
   return value;
 }
 
+/**
+ * Format balance to 2 decimal places
+ * @param rawBalance
+ */
 export const formatBalance = (rawBalance: string) => {
-  const balance = (Number.parseInt(rawBalance) / 1000000000000000000).toFixed(
-    2,
-  );
-  return balance;
+  return (Number.parseInt(rawBalance) / 1_000_000_000_000_000_000).toFixed(2);
 };
 
 export const formatChainAsNum = (chainIdHex: string) => {
-  const chainIdNum = Number.parseInt(chainIdHex);
-  return chainIdNum;
-};
-
-export const capitalize = (str: string): string => {
-  const lowered = str.toLowerCase();
-  return lowered.charAt(0).toUpperCase() + lowered.slice(1);
+  return Number.parseInt(chainIdHex);
 };