diff --git a/.github/workflows/test-and-lint.yaml b/.github/workflows/test-and-lint.yaml
index 7419fff..d650ff3 100644
--- a/.github/workflows/test-and-lint.yaml
+++ b/.github/workflows/test-and-lint.yaml
@@ -26,8 +26,6 @@ jobs:
       - name: Install Dependencies
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
         run: npm install
-      - name: Copy env file
-        run: cp .env.example .env
       - name: Lint
         run: npm run lint
       - name: Test
diff --git a/.gitignore b/.gitignore
index fe1d564..d4cab0f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,6 +23,7 @@ web/build
 
 # envs
 .env
+.env.local
 
 # local secrets
 .secret.local
diff --git a/web/.env.test b/web/.env.test
new file mode 100644
index 0000000..bd3b375
--- /dev/null
+++ b/web/.env.test
@@ -0,0 +1,9 @@
+# NOTE - REACT_APP_VERSION is commented out on purpose to test getEnvVariable
+#REACT_APP_VERSION=$npm_package_version
+
+REACT_APP_ENV=test
+
+REACT_APP_SEQUENCER_BRIDGE_ACCOUNT=astria1d7zjjljc0dsmxa545xkpwxym86g8uvvwhtezcr
+REACT_APP_EVM_WITHDRAWER_CONTRACT_ADDRESS=0xA58639fB5458e65E4fA917FF951C390292C24A15
+
+REACT_APP_IBC_CHAINS='{"Celestia Mocha-4":{"chainId":"mocha-4","chainName":"Celestia Mocha-4","rpc":"wss://rpc-mocha.pops.one","rest":"https://api-mocha.pops.one","stakeCurrency":{"coinDenom":"TIA","coinMinimalDenom":"utia","coinDecimals":6},"bip44":{"coinType":118},"bech32Config":{"bech32PrefixAccAddr":"celestia","bech32PrefixAccPub":"celestiapub","bech32PrefixConsAddr":"celestiavalcons","bech32PrefixConsPub":"celestiavalconspub","bech32PrefixValAddr":"celestiavaloper","bech32PrefixValPub":"celestiavaloperpub"},"currencies":[{"coinDenom":"TIA","coinMinimalDenom":"utia","coinDecimals":6}],"feeCurrencies":[{"coinDenom":"TIA","coinMinimalDenom":"utia","coinDecimals":6,"gasPriceStep":{"low":0.01,"average":0.02,"high":0.1}}],"ibcChannel":"channel-110","iconSourceUrl":"https://placehold.co/60x60/EEE/31343C"}}'
diff --git a/web/justfile b/web/justfile
index 2a9b45d..1551d05 100644
--- a/web/justfile
+++ b/web/justfile
@@ -1,9 +1,9 @@
 _default:
   @just --list
 
-# copies web/.env.example to web/.env
+# copies web/.env.example to web/.env.local
 init-env:
-  cp .env.example .env
+  cp .env.example .env.local
 
 # installs npm deps for web
 install:
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 6a87ae5..6e2290c 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -3,21 +3,24 @@ import { Route, Routes } from "react-router-dom";
 import { EthWalletContextProvider } from "features/EthWallet/contexts/EthWalletContext";
 import BridgePage from "pages/BridgePage/BridgePage";
 import Layout from "pages/Layout";
-import { NotificationsProvider } from "features/Notifications/contexts/NotificationsContext";
+import { NotificationsContextProvider } from "features/Notifications/contexts/NotificationsContext";
+import { ConfigContextProvider } from "config/contexts/ConfigContext";
 
 /**
  * App component with routes.
  */
 export default function App(): React.ReactElement {
   return (
-    <NotificationsProvider>
-      <EthWalletContextProvider>
-        <Routes>
-          <Route element={<Layout />}>
-            <Route index element={<BridgePage />} />
-          </Route>
-        </Routes>
-      </EthWalletContextProvider>
-    </NotificationsProvider>
+    <ConfigContextProvider>
+      <NotificationsContextProvider>
+        <EthWalletContextProvider>
+          <Routes>
+            <Route element={<Layout />}>
+              <Route index element={<BridgePage />} />
+            </Route>
+          </Routes>
+        </EthWalletContextProvider>
+      </NotificationsContextProvider>
+    </ConfigContextProvider>
   );
 }
diff --git a/web/src/chainInfos/index.ts b/web/src/chainInfos/index.ts
deleted file mode 100644
index 255d09f..0000000
--- a/web/src/chainInfos/index.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-import type { ChainInfo } from "@keplr-wallet/types";
-
-export const CelestiaChainInfo: ChainInfo = {
-  // 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
-  // TODO - use envar
-  rpc: "http://rpc.app.celestia.localdev.me",
-  // REST endpoint of the chain.
-  // TODO - use envar
-  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,
-  },
-
-  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,
-      },
-    },
-  ],
-};
-
-export const AstriaChainInfo: ChainInfo = {
-  // Chain-id of the Astria chain.
-  chainId: "sequencer-test-chain-0",
-  // The name of the chain to be displayed to the user.
-  chainName: "sequencer-test-chain-0",
-  // RPC endpoint of the chain. In this case we are using blockapsis, as it's accepts connections from any host currently. No Cors limitations.
-  // TODO - use envar
-  rpc: "http://rpc.sequencer.localdev.me",
-  // REST endpoint of the chain.
-  // TODO - use envar
-  rest: "http://rpc.sequencer.localdev.me",
-  // Staking coin information
-  stakeCurrency: {
-    // Coin denomination to be displayed to the user.
-    coinDenom: "RIA",
-    // Actual denom (i.e. uatom, uscrt) used by the blockchain.
-    coinMinimalDenom: "nria",
-    // # of decimal points to convert minimal denomination to user-facing denomination.
-    coinDecimals: 9,
-    // (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,
-  },
-  // Bech32 configuration to show the address to user.
-  // This field is the interface of
-  // {
-  //   bech32PrefixAccAddr: string;
-  //   bech32PrefixAccPub: string;
-  //   bech32PrefixValAddr: string;
-  //   bech32PrefixValPub: string;
-  //   bech32PrefixConsAddr: string;
-  //   bech32PrefixConsPub: string;
-  // }
-  bech32Config: {
-    bech32PrefixAccAddr: "astria",
-    bech32PrefixAccPub: "astriapub",
-    bech32PrefixConsAddr: "astriavalcons",
-    bech32PrefixConsPub: "astriavalconspub",
-    bech32PrefixValAddr: "astriavaloper",
-    bech32PrefixValPub: "astriavaloperpub",
-  },
-  // List of all coin/tokens used in this chain.
-  currencies: [
-    {
-      // Coin denomination to be displayed to the user.
-      coinDenom: "RIA",
-      // Actual denom (i.e. uatom, uscrt) used by the blockchain.
-      coinMinimalDenom: "nria",
-      // # of decimal points to convert minimal denomination to user-facing denomination.
-      coinDecimals: 9,
-      // (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: "RIA",
-      // Actual denom (i.e. nria, uscrt) used by the blockchain.
-      coinMinimalDenom: "nria",
-      // # of decimal points to convert minimal denomination to user-facing denomination.
-      coinDecimals: 9,
-      // (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,
-      },
-    },
-  ],
-};
diff --git a/web/src/components/DepositCard/DepositCard.tsx b/web/src/components/DepositCard/DepositCard.tsx
index 703fda1..90d911b 100644
--- a/web/src/components/DepositCard/DepositCard.tsx
+++ b/web/src/components/DepositCard/DepositCard.tsx
@@ -1,4 +1,5 @@
 import type React from "react";
+import { useMemo } from "react";
 import { useContext, useEffect, useState } from "react";
 import { Dec, DecUtils } from "@keplr-wallet/unit";
 import { NotificationType } from "features/Notifications/components/Notification/types";
@@ -10,13 +11,27 @@ import { getBalance, sendIbcTransfer } from "services/ibc";
 import { getKeplrFromWindow } from "services/keplr";
 import { useIbcChainSelection } from "features/IbcChainSelector/hooks/useIbcChainSelection";
 import Dropdown from "components/Dropdown/Dropdown";
+import { useConfig } from "config/hooks/useConfig";
 
 export default function DepositCard(): React.ReactElement {
   const { addNotification } = useContext(NotificationsContext);
   const { userAccount } = useEthWallet();
+  const { ibcChains } = useConfig();
 
-  const { selectedIbcChain, selectIbcChain, ibcChainsOptions } =
-    useIbcChainSelection();
+  const {
+    selectIbcChain,
+    ibcChainsOptions,
+    selectedIbcChain,
+    selectIbcCurrency,
+    ibcCurrencyOptions,
+    selectedIbcCurrency,
+  } = useIbcChainSelection(ibcChains);
+  const defaultIbcChainOption = useMemo(() => {
+    return ibcChainsOptions[0] || null;
+  }, [ibcChainsOptions]);
+  const defaultIbcCurrencyOption = useMemo(() => {
+    return ibcCurrencyOptions[0] || null;
+  }, [ibcCurrencyOptions]);
 
   const [balance, setBalance] = useState<string>("0 TIA");
   const [fromAddress, setFromAddress] = useState<string>("");
@@ -48,12 +63,13 @@ export default function DepositCard(): React.ReactElement {
   }, [recipientAddress, amount]);
 
   const getAndSetBalance = async () => {
-    if (!selectedIbcChain) {
+    if (!selectedIbcChain || !selectedIbcCurrency) {
       return;
     }
     try {
       setIsLoadingBalance(true);
-      const balance = await getBalance(selectedIbcChain);
+      // TODO - should update balance if user selects different token
+      const balance = await getBalance(selectedIbcChain, selectedIbcCurrency);
       setBalance(balance);
     } catch (e) {
       console.error(e);
@@ -64,11 +80,11 @@ export default function DepositCard(): React.ReactElement {
   };
 
   const sendBalance = async () => {
-    if (!selectedIbcChain) {
+    if (!selectedIbcChain || !selectedIbcCurrency) {
       addNotification({
         toastOpts: {
           toastType: NotificationType.WARNING,
-          message: "Please select a chain first.",
+          message: "Please select a chain and token first.",
           onAcknowledge: () => {},
         },
       });
@@ -83,6 +99,7 @@ export default function DepositCard(): React.ReactElement {
         fromAddress,
         recipientAddress,
         DecUtils.getTenExponentN(6).mul(new Dec(amount)).truncate().toString(),
+        selectedIbcCurrency,
       );
     } catch (e) {
       if (e instanceof Error) {
@@ -211,8 +228,8 @@ export default function DepositCard(): React.ReactElement {
             <Dropdown
               placeholder="Select a chain"
               options={ibcChainsOptions}
-              defaultOption={ibcChainsOptions[0]}
-              onSelect={(selected) => selectIbcChain(selected)}
+              defaultOption={defaultIbcChainOption}
+              onSelect={selectIbcChain}
             />
             <button
               type="button"
@@ -224,6 +241,17 @@ export default function DepositCard(): React.ReactElement {
                 ? "Connected to Keplr Wallet"
                 : "Connect Keplr Wallet"}
             </button>
+            {selectedIbcChain && ibcCurrencyOptions && (
+              <div>
+                <Dropdown
+                  placeholder="Select a token"
+                  options={ibcCurrencyOptions}
+                  defaultOption={defaultIbcCurrencyOption}
+                  onSelect={selectIbcCurrency}
+                  disabled={!selectedIbcChain}
+                />
+              </div>
+            )}
           </div>
           <div>
             {fromAddress && !isLoadingBalance && (
@@ -249,7 +277,7 @@ export default function DepositCard(): React.ReactElement {
             value={amount}
           />
           <span className="icon is-right mt-1">
-            <p>TIA</p>
+            <p>{selectedIbcCurrency?.coinDenom}</p>
           </span>
         </div>
         {!isAmountValid && hasTouchedForm && (
diff --git a/web/src/components/Dropdown/Dropdown.tsx b/web/src/components/Dropdown/Dropdown.tsx
index 3eac10c..d769fec 100644
--- a/web/src/components/Dropdown/Dropdown.tsx
+++ b/web/src/components/Dropdown/Dropdown.tsx
@@ -11,6 +11,7 @@ interface DropdownProps<T> {
   onSelect: (value: T) => void;
   placeholder?: string;
   defaultOption?: DropdownOption<T>;
+  disabled?: boolean;
 }
 
 function Dropdown<T>({
@@ -18,11 +19,13 @@ function Dropdown<T>({
   onSelect,
   placeholder = "Select an option",
   defaultOption,
+  disabled,
 }: DropdownProps<T>) {
   const [isActive, setIsActive] = useState(false);
   const [selectedOption, setSelectedOption] =
     useState<DropdownOption<T> | null>(defaultOption || null);
 
+  // set the default option when defaultOption or onSelect change
   useEffect(() => {
     if (defaultOption) {
       setSelectedOption(defaultOption);
@@ -37,7 +40,11 @@ function Dropdown<T>({
   };
 
   return (
-    <div className={`dropdown ${isActive ? "is-active" : ""}`}>
+    <div
+      className={`dropdown ${isActive ? "is-active" : ""} ${
+        disabled ? "is-disabled" : ""
+      }`}
+    >
       <div className="dropdown-trigger">
         <button
           type="button"
diff --git a/web/src/components/WithdrawCard/WithdrawCard.tsx b/web/src/components/WithdrawCard/WithdrawCard.tsx
index 7d2619d..520edc7 100644
--- a/web/src/components/WithdrawCard/WithdrawCard.tsx
+++ b/web/src/components/WithdrawCard/WithdrawCard.tsx
@@ -11,13 +11,15 @@ import {
 } from "features/EthWallet";
 import { useIbcChainSelection } from "features/IbcChainSelector";
 import Dropdown from "components/Dropdown/Dropdown";
+import { useConfig } from "config/hooks/useConfig";
 
 export default function WithdrawCard(): React.ReactElement {
   const { addNotification } = useContext(NotificationsContext);
   const { userAccount, selectedWallet } = useEthWallet();
+  const { ibcChains, sequencerBridgeAccount } = useConfig();
 
   const { selectedIbcChain, selectIbcChain, ibcChainsOptions } =
-    useIbcChainSelection();
+    useIbcChainSelection(ibcChains);
 
   const [balance, setBalance] = useState<string>("0 TIA");
   const [fromAddress, setFromAddress] = useState<string>("");
@@ -58,7 +60,6 @@ export default function WithdrawCard(): React.ReactElement {
   };
 
   const connectKeplrWallet = async () => {
-    console.log({ selectedIbcChain });
     if (!selectedIbcChain) {
       addNotification({
         toastOpts: {
@@ -146,7 +147,10 @@ export default function WithdrawCard(): React.ReactElement {
     setIsLoading(true);
     setIsAnimating(true);
     try {
-      const withdrawerSvc = getAstriaWithdrawerService(selectedWallet.provider);
+      const withdrawerSvc = getAstriaWithdrawerService(
+        selectedWallet.provider,
+        sequencerBridgeAccount,
+      );
       await withdrawerSvc.withdrawToIbcChain(
         fromAddress,
         toAddress,
diff --git a/web/src/config/chainConfigs/dusk.ts b/web/src/config/chainConfigs/dusk.ts
index 7133226..6f5086a 100644
--- a/web/src/config/chainConfigs/dusk.ts
+++ b/web/src/config/chainConfigs/dusk.ts
@@ -1,4 +1,4 @@
-import type { IbcChainInfo, IbcChains } from "../chains";
+import type { IbcChainInfo, IbcChains } from ".";
 
 const CelestiaChainInfo: IbcChainInfo = {
   // Chain-id of the celestia chain.
diff --git a/web/src/config/chains.ts b/web/src/config/chainConfigs/index.ts
similarity index 77%
rename from web/src/config/chains.ts
rename to web/src/config/chainConfigs/index.ts
index 816cf1a..61ccc33 100644
--- a/web/src/config/chains.ts
+++ b/web/src/config/chainConfigs/index.ts
@@ -1,7 +1,7 @@
 import type { ChainInfo } from "@keplr-wallet/types";
-import { getEnvVariable } from "utils";
-import { ibcChains as localIbcChains } from "./chainConfigs/local";
-import { ibcChains as duskIbcChains } from "./chainConfigs/dusk";
+import { getEnvVariable } from "config/env";
+import { ibcChains as localIbcChains } from "./local";
+import { ibcChains as duskIbcChains } from "./dusk";
 
 /**
  * Represents information about an IBC (Inter-Blockchain Communication) chain.
@@ -22,6 +22,15 @@ export type IbcChains = {
   [label: string]: IbcChainInfo;
 };
 
+/**
+ * Represents information about a currency used in an IBC chain.
+ */
+export type IbcCurrency = {
+  coinDenom: string;
+  coinMinimalDenom: string;
+  coinDecimals: number;
+};
+
 /**
  * Retrieves the IBC chains from the environment variable override or the default chain configurations,
  * depending on the environment.
@@ -33,6 +42,7 @@ export function getIbcChains(): IbcChains {
   try {
     const ibcChains = getEnvVariable("REACT_APP_IBC_CHAINS");
     if (ibcChains) {
+      // TODO - validate the JSON against type
       return JSON.parse(ibcChains);
     }
   } catch (e) {
diff --git a/web/src/config/chainConfigs/local.ts b/web/src/config/chainConfigs/local.ts
index 1789f87..64ec983 100644
--- a/web/src/config/chainConfigs/local.ts
+++ b/web/src/config/chainConfigs/local.ts
@@ -1,4 +1,4 @@
-import type { IbcChainInfo, IbcChains } from "../chains";
+import type { IbcChainInfo, IbcChains } from ".";
 
 const CelestiaChainInfo: IbcChainInfo = {
   // Chain-id of the celestia chain.
@@ -52,6 +52,15 @@ const CelestiaChainInfo: IbcChainInfo = {
       // You can get id from https://api.coingecko.com/api/v3/coins/list if it is listed.
       // coinGeckoId: ""
     },
+    {
+      // Not a real currency, just using for developing the ui
+      // Coin denomination to be displayed to the user.
+      coinDenom: "STEEZE",
+      // Actual denom (i.e. uatom, uscrt) used by the blockchain.
+      coinMinimalDenom: "usteeze",
+      // # of decimal points to convert minimal denomination to user-facing denomination.
+      coinDecimals: 6,
+    },
   ],
   // List of coin/tokens used as a fee token in this chain.
   feeCurrencies: [
diff --git a/web/src/config/config.test.ts b/web/src/config/config.test.ts
new file mode 100644
index 0000000..1b39f15
--- /dev/null
+++ b/web/src/config/config.test.ts
@@ -0,0 +1,27 @@
+import { getEnvVariable } from "./env";
+
+describe("config", () => {
+  describe("getEnvVariable", () => {
+    const OLD_ENV = process.env;
+
+    beforeEach(() => {
+      jest.resetModules();
+      process.env = { ...OLD_ENV };
+    });
+
+    afterAll(() => {
+      process.env = OLD_ENV;
+    });
+
+    it("should return the value of an existing environment variable", () => {
+      process.env.REACT_APP_ENV = "test";
+      expect(getEnvVariable("REACT_APP_ENV")).toBe("test");
+    });
+
+    it("should throw an error if the environment variable is not set", () => {
+      expect(() => getEnvVariable("REACT_APP_VERSION")).toThrow(
+        "REACT_APP_VERSION not set",
+      );
+    });
+  });
+});
diff --git a/web/src/config/contexts/ConfigContext.test.tsx b/web/src/config/contexts/ConfigContext.test.tsx
new file mode 100644
index 0000000..46aa89e
--- /dev/null
+++ b/web/src/config/contexts/ConfigContext.test.tsx
@@ -0,0 +1,35 @@
+import type React from "react";
+import { render, screen } from "@testing-library/react";
+import { ConfigContextProvider } from "./ConfigContext";
+import { useConfig } from "../hooks/useConfig";
+
+const TestComponent: React.FC = () => {
+  const config = useConfig();
+  return <div>{JSON.stringify(config)}</div>;
+};
+
+describe("ConfigContextProvider", () => {
+  it("provides the correct config values", () => {
+    render(
+      <ConfigContextProvider>
+        <TestComponent />
+      </ConfigContextProvider>,
+    );
+
+    // NOTE - astria1d7z matches value in .env.test
+    const configString = screen.getByText(/astria1d7z/);
+    expect(configString).toBeInTheDocument();
+    expect(configString).toHaveTextContent("Celestia Mocha-4");
+  });
+
+  it("throws an error when useConfig is used outside of ConfigContextProvider", () => {
+    // this blocks the console.error output so the test output is clean
+    const consoleErrorSpy = jest
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+    expect(() => render(<TestComponent />)).toThrow(
+      "useConfig must be used within a ConfigContextProvider",
+    );
+    consoleErrorSpy.mockRestore();
+  });
+});
diff --git a/web/src/config/contexts/ConfigContext.tsx b/web/src/config/contexts/ConfigContext.tsx
new file mode 100644
index 0000000..09bbc79
--- /dev/null
+++ b/web/src/config/contexts/ConfigContext.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+import type { AppConfig } from "..";
+import type { IbcChains } from "../chainConfigs";
+import { getIbcChains } from "../chainConfigs";
+import { getEnvVariable } from "../env";
+
+export const ConfigContext = React.createContext<AppConfig | undefined>(
+  undefined,
+);
+
+type ConfigContextProps = {
+  children: React.ReactNode;
+};
+
+/**
+ * ConfigContextProvider component to provide notifications context to children.
+ * @param children
+ */
+export const ConfigContextProvider: React.FC<ConfigContextProps> = ({
+  children,
+}) => {
+  const ibcChains: IbcChains = getIbcChains();
+  const sequencerBridgeAccount = getEnvVariable(
+    "REACT_APP_SEQUENCER_BRIDGE_ACCOUNT",
+  );
+
+  return (
+    <ConfigContext.Provider value={{ ibcChains, sequencerBridgeAccount }}>
+      {children}
+    </ConfigContext.Provider>
+  );
+};
diff --git a/web/src/config/env.ts b/web/src/config/env.ts
new file mode 100644
index 0000000..a1cc4d1
--- /dev/null
+++ b/web/src/config/env.ts
@@ -0,0 +1,27 @@
+/**
+ * Environment variables
+ */
+export const ENV = {
+  REACT_APP_ENV: process.env.REACT_APP_ENV,
+  REACT_APP_VERSION: process.env.REACT_APP_VERSION,
+  REACT_APP_SEQUENCER_BRIDGE_ACCOUNT:
+    process.env.REACT_APP_SEQUENCER_BRIDGE_ACCOUNT,
+  REACT_APP_EVM_WITHDRAWER_CONTRACT_ADDRESS:
+    process.env.REACT_APP_EVM_WITHDRAWER_CONTRACT_ADDRESS,
+  REACT_APP_IBC_CHAINS: process.env.REACT_APP_IBC_CHAINS,
+};
+
+/**
+ * Get environment variable
+ *
+ * @param {string} key - key of environment variable
+ * @returns {string} value of environment variable
+ * @throws {Error} if environment variable is not set
+ */
+export const getEnvVariable = (key: keyof typeof ENV): string => {
+  const value = ENV[key];
+  if (value === undefined) {
+    throw new Error(`${key} not set`);
+  }
+  return value;
+};
diff --git a/web/src/config/hooks/useConfig.ts b/web/src/config/hooks/useConfig.ts
new file mode 100644
index 0000000..bb79765
--- /dev/null
+++ b/web/src/config/hooks/useConfig.ts
@@ -0,0 +1,14 @@
+import { useContext } from "react";
+
+import { ConfigContext } from "../contexts/ConfigContext";
+
+/**
+ * Hook to use the config context.
+ */
+export const useConfig = () => {
+  const context = useContext(ConfigContext);
+  if (context === undefined) {
+    throw new Error("useConfig must be used within a ConfigContextProvider");
+  }
+  return context;
+};
diff --git a/web/src/config/index.ts b/web/src/config/index.ts
index 8273a45..b64584b 100644
--- a/web/src/config/index.ts
+++ b/web/src/config/index.ts
@@ -1,4 +1,4 @@
-import { getIbcChains, type IbcChains } from "./chains";
+import type { IbcChains } from "./chainConfigs";
 
 /**
  * Represents the configuration object for the application.
@@ -8,15 +8,5 @@ import { getIbcChains, type IbcChains } from "./chains";
  */
 export type AppConfig = {
   ibcChains: IbcChains;
+  sequencerBridgeAccount: string;
 };
-
-/**
- * Returns the application configuration.
- *
- * @return {AppConfig} The application configuration object.
- */
-export function getAppConfig(): AppConfig {
-  return {
-    ibcChains: getIbcChains(),
-  };
-}
diff --git a/web/src/features/EthWallet/services/AstriaWithdrawerService/AstriaWithdrawerService.test.ts b/web/src/features/EthWallet/services/AstriaWithdrawerService/AstriaWithdrawerService.test.ts
index cf31205..fa4cd24 100644
--- a/web/src/features/EthWallet/services/AstriaWithdrawerService/AstriaWithdrawerService.test.ts
+++ b/web/src/features/EthWallet/services/AstriaWithdrawerService/AstriaWithdrawerService.test.ts
@@ -1,11 +1,7 @@
 import { ethers } from "ethers";
 import { getAstriaWithdrawerService } from "./AstriaWithdrawerService";
-import { getEnvVariable } from "utils";
 
 jest.mock("ethers");
-jest.mock("utils", () => ({
-  getEnvVariable: jest.fn(),
-}));
 
 describe("AstriaWithdrawerService", () => {
   const mockContractAddress = "0x1234567890123456789012345678901234567890";
@@ -22,9 +18,6 @@ describe("AstriaWithdrawerService", () => {
   beforeEach(() => {
     jest.resetAllMocks();
 
-    // mock getEnvVariable
-    (getEnvVariable as jest.Mock).mockReturnValue(mockContractAddress);
-
     // mock ethers.BrowserProvider
     mockProvider = {
       getSigner: jest.fn(),
@@ -52,8 +45,19 @@ describe("AstriaWithdrawerService", () => {
     );
   });
 
+  it("should throw an error if contract address is not supplied on first instantiation", () => {
+    expect(() =>
+      getAstriaWithdrawerService({} as ethers.Eip1193Provider),
+    ).toThrow(
+      "Contract address must be supplied when creating the service instance",
+    );
+  });
+
   it("should create a singleton instance", () => {
-    const service1 = getAstriaWithdrawerService({} as ethers.Eip1193Provider);
+    const service1 = getAstriaWithdrawerService(
+      {} as ethers.Eip1193Provider,
+      mockContractAddress,
+    );
     const service2 = getAstriaWithdrawerService();
 
     expect(service1).toBe(service2);
diff --git a/web/src/features/EthWallet/services/AstriaWithdrawerService/AstriaWithdrawerService.ts b/web/src/features/EthWallet/services/AstriaWithdrawerService/AstriaWithdrawerService.ts
index 8b9ddf8..3173474 100644
--- a/web/src/features/EthWallet/services/AstriaWithdrawerService/AstriaWithdrawerService.ts
+++ b/web/src/features/EthWallet/services/AstriaWithdrawerService/AstriaWithdrawerService.ts
@@ -1,5 +1,4 @@
 import { ethers } from "ethers";
-import { getEnvVariable } from "utils";
 
 const ABI = [
   "function withdrawToSequencer(string destinationChainAddress) payable",
@@ -17,28 +16,23 @@ export class AstriaWithdrawerService {
   private readonly contractAddress: string;
   private contractPromise: Promise<ethers.Contract> | null = null;
 
-  private constructor(walletProvider: ethers.Eip1193Provider) {
+  private constructor(
+    walletProvider: ethers.Eip1193Provider,
+    contractAddress: string,
+  ) {
     this.walletProvider = new ethers.BrowserProvider(walletProvider);
-    try {
-      this.contractAddress = getEnvVariable(
-        "REACT_APP_EVM_WITHDRAWER_CONTRACT_ADDRESS",
-      );
-    } catch (error) {
-      console.error(
-        "REACT_APP_EVM_WITHDRAWER_CONTRACT_ADDRESS not set:",
-        error,
-      );
-      throw error;
-    }
+    this.contractAddress = contractAddress;
   }
 
   /**
    * Get the singleton instance of the AstriaWithdrawerService.
    * If a provider is supplied, it will be used to create a new instance.
    * @param provider
+   * @param contractAddress
    */
   public static getInstance(
     provider?: ethers.Eip1193Provider,
+    contractAddress?: string,
   ): AstriaWithdrawerService {
     if (!AstriaWithdrawerService.instance) {
       if (!provider) {
@@ -46,7 +40,15 @@ export class AstriaWithdrawerService {
           "Provider must be supplied when creating the service instance",
         );
       }
-      AstriaWithdrawerService.instance = new AstriaWithdrawerService(provider);
+      if (!contractAddress) {
+        throw new Error(
+          "Contract address must be supplied when creating the service instance",
+        );
+      }
+      AstriaWithdrawerService.instance = new AstriaWithdrawerService(
+        provider,
+        contractAddress,
+      );
     } else if (provider) {
       // update the provider if one is supplied
       AstriaWithdrawerService.instance.updateProvider(provider);
@@ -120,9 +122,11 @@ export class AstriaWithdrawerService {
 /**
  * Get the singleton instance of the AstriaWithdrawerService.
  * @param provider
+ * @param contractAddress
  */
 export const getAstriaWithdrawerService = (
   provider?: ethers.Eip1193Provider,
+  contractAddress?: string,
 ): AstriaWithdrawerService => {
-  return AstriaWithdrawerService.getInstance(provider);
+  return AstriaWithdrawerService.getInstance(provider, contractAddress);
 };
diff --git a/web/src/features/IbcChainSelector/hooks/useIbcChainSelection.ts b/web/src/features/IbcChainSelector/hooks/useIbcChainSelection.ts
index 9b5c7a0..ab8b7c6 100644
--- a/web/src/features/IbcChainSelector/hooks/useIbcChainSelection.ts
+++ b/web/src/features/IbcChainSelector/hooks/useIbcChainSelection.ts
@@ -1,29 +1,49 @@
-import { useMemo, useState } from "react";
+import { useMemo, useState, useCallback } from "react";
 import type { DropdownOption } from "components/Dropdown/Dropdown";
-import type { IbcChainInfo } from "config/chains";
-import { getAppConfig } from "config";
+import type { IbcChainInfo, IbcChains, IbcCurrency } from "config/chainConfigs";
 
-export function useIbcChainSelection() {
+export function useIbcChainSelection(ibcChains: IbcChains) {
   const [selectedIbcChain, setSelectedIbcChain] = useState<IbcChainInfo | null>(
     null,
   );
+  const [selectedIbcCurrency, setSelectedIbcCurrency] =
+    useState<IbcCurrency | null>(null);
 
   const ibcChainsOptions = useMemo(() => {
-    return Object.entries(getAppConfig().ibcChains).map(
+    return Object.entries(ibcChains).map(
       ([chainLabel, chain]): DropdownOption<IbcChainInfo> => ({
         label: chainLabel,
         value: chain,
       }),
     );
-  }, []);
+  }, [ibcChains]);
 
-  const selectIbcChain = (chain: IbcChainInfo) => {
+  const selectIbcChain = useCallback((chain: IbcChainInfo) => {
     setSelectedIbcChain(chain);
-  };
+  }, []);
+
+  const ibcCurrencyOptions = useMemo(() => {
+    if (!selectedIbcChain) {
+      return [];
+    }
+    return selectedIbcChain.currencies?.map(
+      (currency): DropdownOption<IbcCurrency> => ({
+        label: currency.coinDenom,
+        value: currency,
+      }),
+    );
+  }, [selectedIbcChain]);
+
+  const selectIbcCurrency = useCallback((currency: IbcCurrency) => {
+    setSelectedIbcCurrency(currency);
+  }, []);
 
   return {
     selectedIbcChain,
     selectIbcChain,
     ibcChainsOptions,
+    selectIbcCurrency,
+    selectedIbcCurrency,
+    ibcCurrencyOptions,
   };
 }
diff --git a/web/src/features/Notifications/contexts/NotificationsContext.tsx b/web/src/features/Notifications/contexts/NotificationsContext.tsx
index 4c152fe..6a253db 100644
--- a/web/src/features/Notifications/contexts/NotificationsContext.tsx
+++ b/web/src/features/Notifications/contexts/NotificationsContext.tsx
@@ -26,9 +26,9 @@ type NotificationsProviderProps = {
  * NotificationsProvider component to provide notifications context to children.
  * @param children
  */
-export const NotificationsProvider: React.FC<NotificationsProviderProps> = ({
-  children,
-}) => {
+export const NotificationsContextProvider: React.FC<
+  NotificationsProviderProps
+> = ({ children }) => {
   const [notifications, setNotifications] = useState<Notification[]>([]);
 
   const addNotification = ({ modalOpts, toastOpts }: AddNotificationOpts) => {
diff --git a/web/src/services/ibc.ts b/web/src/services/ibc.ts
index 9a765c4..ff2f903 100644
--- a/web/src/services/ibc.ts
+++ b/web/src/services/ibc.ts
@@ -1,8 +1,8 @@
 import Long from "long";
 import { SigningStargateClient, StargateClient } from "@cosmjs/stargate";
 import { Dec } from "@keplr-wallet/unit";
-import type { IbcChainInfo } from "config/chains";
-import { getEnvVariable } from "utils";
+import type { IbcChainInfo, IbcCurrency } from "config/chainConfigs";
+import { getEnvVariable } from "config/env";
 
 /**
  * Send an IBC transfer from the selected chain to the recipient address.
@@ -11,12 +11,14 @@ import { getEnvVariable } from "utils";
  * @param sender
  * @param recipient
  * @param amount
+ * @param currency
  */
 export const sendIbcTransfer = async (
   selectedIbcChain: IbcChainInfo,
   sender: string,
   recipient: string,
   amount: string,
+  currency: IbcCurrency,
 ) => {
   const keplr = window.keplr;
   if (!keplr) {
@@ -57,8 +59,7 @@ export const sendIbcTransfer = async (
       sourcePort: "transfer",
       sourceChannel: selectedIbcChain.ibcChannel,
       token: {
-        // TODO - should be configurable/selectable in the ui
-        denom: selectedIbcChain.currencies[0].coinMinimalDenom,
+        denom: currency.coinMinimalDenom,
         amount: amount,
       },
       sender: sender,
@@ -82,7 +83,10 @@ export const sendIbcTransfer = async (
 
 export const getBalance = async (
   selectedIbcChain: IbcChainInfo,
+  selectedCurrency: IbcCurrency,
 ): Promise<string> => {
+  // TODO - add ability to get balance for other currencies
+
   const keplr = window.keplr;
   if (!keplr) {
     throw new Error("Keplr extension not installed");
diff --git a/web/src/styles/dropdown-customizations.scss b/web/src/styles/dropdown-customizations.scss
new file mode 100644
index 0000000..f7e9eb7
--- /dev/null
+++ b/web/src/styles/dropdown-customizations.scss
@@ -0,0 +1,4 @@
+.dropdown.is-disabled {
+    background-color: $astria-grey-dark;
+    color: $astria-text-light;
+}
diff --git a/web/src/styles/index.scss b/web/src/styles/index.scss
index ea98be5..8a81c06 100644
--- a/web/src/styles/index.scss
+++ b/web/src/styles/index.scss
@@ -27,6 +27,7 @@ html, body {
 // NOTE - these css customizations must be imported AFTER bulma to override the css classes
 @import 'button-customizations';
 @import 'card-customizations';
+@import 'dropdown-customizations';
 @import 'form-customizations';
 
 // body reset
diff --git a/web/src/testHelpers.tsx b/web/src/testHelpers.tsx
index 9fd9347..9b5da65 100644
--- a/web/src/testHelpers.tsx
+++ b/web/src/testHelpers.tsx
@@ -2,15 +2,18 @@ import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { render } from "@testing-library/react";
 import type React from "react";
 import { EthWalletContextProvider } from "./features/EthWallet/contexts/EthWalletContext";
+import { ConfigContextProvider } from "./config/contexts/ConfigContext";
 
 export const renderWithRouter = (element: React.JSX.Element) => {
   render(
     <MemoryRouter>
-      <EthWalletContextProvider>
-        <Routes>
-          <Route index path={"*"} element={element} />
-        </Routes>
-      </EthWalletContextProvider>
+      <ConfigContextProvider>
+        <EthWalletContextProvider>
+          <Routes>
+            <Route index path={"*"} element={element} />
+          </Routes>
+        </EthWalletContextProvider>
+      </ConfigContextProvider>
     </MemoryRouter>,
   );
 };
diff --git a/web/src/utils/index.test.ts b/web/src/utils/index.test.ts
index 88141bb..e0e8023 100644
--- a/web/src/utils/index.test.ts
+++ b/web/src/utils/index.test.ts
@@ -1,30 +1,6 @@
-import { getEnvVariable, formatBalance, formatChainAsNum } from "utils";
+import { formatBalance, formatChainAsNum } from "utils";
 
 describe("Utility Functions", () => {
-  describe("getEnvVariable", () => {
-    const OLD_ENV = process.env;
-
-    beforeEach(() => {
-      jest.resetModules();
-      process.env = { ...OLD_ENV };
-    });
-
-    afterAll(() => {
-      process.env = OLD_ENV;
-    });
-
-    it("should return the value of an existing environment variable", () => {
-      process.env.TEST_VAR = "test_value";
-      expect(getEnvVariable("TEST_VAR")).toBe("test_value");
-    });
-
-    it("should throw an error if the environment variable is not set", () => {
-      expect(() => getEnvVariable("NON_EXISTENT_VAR")).toThrow(
-        "NON_EXISTENT_VAR not set",
-      );
-    });
-  });
-
   describe("formatBalance", () => {
     it("should correctly format the balance", () => {
       expect(formatBalance("1000000000000000000")).toBe("1.00");
diff --git a/web/src/utils/index.ts b/web/src/utils/index.ts
index 36ecdba..6b43151 100644
--- a/web/src/utils/index.ts
+++ b/web/src/utils/index.ts
@@ -1,18 +1,3 @@
-/**
- * Get environment variable
- *
- * @param {string} name - name of environment variable
- * @returns {string} value of environment variable
- * @throws {Error} if environment variable is not set
- */
-export function getEnvVariable(name: string): string {
-  const value = process.env[name];
-  if (!value) {
-    throw new Error(`${name} not set`);
-  }
-  return value;
-}
-
 /**
  * Format balance to 2 decimal places
  * @param rawBalance