Feature/token selection (#18)

* remove old config

* refactored config to be cleaner

* add ibc currency selection abilities. fix bug in dropdown

* dont copy env in test runner

.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

.gitignore

@@ -23,6 +23,7 @@ web/build
 
 # envs
 .env
+.env.local
 
 # local secrets
 .secret.local

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"}}'

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:

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>
   );
 }

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 && (

web/src/components/Dropdown/Dropdown.tsx

@@ -11,18 +11,21 @@ interface DropdownProps<T> {
   onSelect: (value: T) => void;
   placeholder?: string;
   defaultOption?: DropdownOption<T>;
+  disabled?: boolean;
 }
 
 function Dropdown<T>({
   options,
   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"