From 2b6f2040e46edf3c59d0bc9af33760431e3d0119 Mon Sep 17 00:00:00 2001
From: Jesse Snyder <jessetsnyder@gmail.com>
Date: Thu, 26 Sep 2024 13:30:58 -0600
Subject: [PATCH] add withdraw back

---
 .../components/DepositCard/DepositCard.tsx    |  34 ++-
 web/src/components/Dropdown/Dropdown.tsx      |  10 +-
 .../components/WithdrawCard/WithdrawCard.tsx  | 200 +++++++++++-------
 web/src/config/chainConfigs/dusk.ts           |   2 +-
 web/src/pages/BridgePage/BridgePage.tsx       |   2 +-
 web/src/styles/card-customizations.scss       |   2 +-
 6 files changed, 144 insertions(+), 106 deletions(-)

diff --git a/web/src/components/DepositCard/DepositCard.tsx b/web/src/components/DepositCard/DepositCard.tsx
index e1e65c5..8cf0b9b 100644
--- a/web/src/components/DepositCard/DepositCard.tsx
+++ b/web/src/components/DepositCard/DepositCard.tsx
@@ -205,12 +205,6 @@ export default function DepositCard(): React.ReactElement {
     setAmount(event.target.value);
   };
 
-  const updateRecipientAddress = (
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    setRecipientAddress(event.target.value);
-  };
-
   const additionalIbcOptions = useMemo(
     () => [
       {
@@ -239,7 +233,7 @@ export default function DepositCard(): React.ReactElement {
       <div className="field">
         <div className="is-flex is-flex-direction-column">
           <div className="is-flex is-flex-direction-row is-align-items-center mb-3">
-            <div className="pl-4 mr-5 w-70">From</div>
+            <div className="mr-5 w-70">From</div>
             <div className="is-flex-grow-1">
               <Dropdown
                 placeholder="Select..."
@@ -278,20 +272,20 @@ export default function DepositCard(): React.ReactElement {
       {isAnimating ? (
         <AnimatedArrowSpacer isAnimating={isAnimating} />
       ) : (
-        <div className="is-flex is-flex-direction-row mb-3">
-          <div className="pl-4">
+        <div className="is-flex is-flex-direction-row">
+          <div>
             <span className="icon is-medium">
               <i className="i-arrow-up-arrow-down" />
             </span>
           </div>
-          <div className="card-spacer" />
+          <div className="ml-3 card-spacer" />
         </div>
       )}
 
       <div className="field">
         <div className="is-flex is-flex-direction-row is-align-items-center">
-          <div className="pl-4 mr-5 w-70">To</div>
-          <div className="mt-3 is-flex-grow-1">
+          <div className="mr-5 w-70">To</div>
+          <div className="is-flex-grow-1">
             <Dropdown
               placeholder="Connect EVM Wallet"
               options={[]}
@@ -311,8 +305,8 @@ export default function DepositCard(): React.ReactElement {
 
       <div className="field">
         <div className="is-flex is-flex-direction-row is-align-items-center">
-          <div className="pl-4 mr-5 w-70">Amount</div>
-          <div className="control mt-1 mr-3 is-flex-grow-1 ">
+          <div className="mr-5 w-70">Amount</div>
+          <div className="control mt-1 is-flex-grow-1">
             <input
               className="input"
               type="text"
@@ -321,15 +315,15 @@ export default function DepositCard(): React.ReactElement {
               value={amount}
             />
           </div>
-          {!isAmountValid && hasTouchedForm && (
-            <p className="help is-danger mt-2">
-              Amount must be a number greater than 0
-            </p>
-          )}
         </div>
+        {!isAmountValid && hasTouchedForm && (
+          <div className="help is-danger mt-2">
+            Amount must be a number greater than 0
+          </div>
+        )}
       </div>
 
-      <div className="card-footer pl-4 my-3">
+      <div className="card-footer mt-4">
         <button
           type="button"
           className="button is-tall is-wide has-gradient-to-right-orange has-text-weight-bold has-text-white"
diff --git a/web/src/components/Dropdown/Dropdown.tsx b/web/src/components/Dropdown/Dropdown.tsx
index 34691ea..79045ac 100644
--- a/web/src/components/Dropdown/Dropdown.tsx
+++ b/web/src/components/Dropdown/Dropdown.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 
 export interface DropdownOption<T> {
   label: string;
@@ -105,10 +105,14 @@ function Dropdown<T>({
             </span>
           )}
           {additionalOptionSelectedLabel && (
-            <span>{additionalOptionSelectedLabel}</span>
+            <span className="dropdown-label is-text-overflow">
+              {additionalOptionSelectedLabel}
+            </span>
           )}
           {!additionalOptionSelectedLabel && (
-            <span>{selectedOption ? selectedOption.label : placeholder}</span>
+            <span className="dropdown-label is-text-overflow">
+              {selectedOption ? selectedOption.label : placeholder}
+            </span>
           )}
           <span className="icon is-small dropdown-icon-right">
             <i className="fas fa-angle-down" />
diff --git a/web/src/components/WithdrawCard/WithdrawCard.tsx b/web/src/components/WithdrawCard/WithdrawCard.tsx
index 520edc7..3a7d403 100644
--- a/web/src/components/WithdrawCard/WithdrawCard.tsx
+++ b/web/src/components/WithdrawCard/WithdrawCard.tsx
@@ -1,4 +1,4 @@
-import type React from "react";
+import React, { useMemo } from "react";
 import { useContext, useEffect, useState } from "react";
 import { useEthWallet } from "features/EthWallet/hooks/useEthWallet";
 import { NotificationsContext } from "features/Notifications/contexts/NotificationsContext";
@@ -18,8 +18,20 @@ export default function WithdrawCard(): React.ReactElement {
   const { userAccount, selectedWallet } = useEthWallet();
   const { ibcChains, sequencerBridgeAccount } = useConfig();
 
-  const { selectedIbcChain, selectIbcChain, ibcChainsOptions } =
-    useIbcChainSelection(ibcChains);
+  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>("");
@@ -29,6 +41,7 @@ export default function WithdrawCard(): React.ReactElement {
   const [isToAddressValid, setIsToAddressValid] = useState<boolean>(false);
   const [hasTouchedForm, setHasTouchedForm] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoadingBalance, setIsLoadingBalance] = useState<boolean>(false);
   const [isAnimating, setIsAnimating] = useState<boolean>(false);
 
   useEffect(() => {
@@ -61,13 +74,8 @@ export default function WithdrawCard(): React.ReactElement {
 
   const connectKeplrWallet = async () => {
     if (!selectedIbcChain) {
-      addNotification({
-        toastOpts: {
-          toastType: NotificationType.WARNING,
-          message: "Please select a chain first.",
-          onAcknowledge: () => {},
-        },
-      });
+      // select default chain if none selected, then return. effect handles retriggering.
+      selectIbcChain(defaultIbcChainOption.value);
       return;
     }
 
@@ -179,105 +187,137 @@ export default function WithdrawCard(): React.ReactElement {
     }
   };
 
+  const additionalIbcOptions = useMemo(
+    () => [
+      {
+        label: "Connect Keplr Wallet",
+        action: connectKeplrWallet,
+        className: "has-text-primary",
+        icon: "fas fa-plus",
+      },
+    ],
+    [connectKeplrWallet],
+  );
+
+  const additionalEvmOptions = useMemo(() => {
+    return [
+      {
+        label: "Connect EVM Wallet",
+        action: connectEVMWallet,
+        className: "has-text-primary",
+        icon: "fas fa-plus",
+      },
+    ];
+  }, [connectEVMWallet]);
+
+  useEffect(() => {
+    if (!selectedIbcChain || !selectedIbcCurrency) {
+      return;
+    }
+    connectKeplrWallet().then((_) => {});
+  }, [selectedIbcChain, selectedIbcCurrency]);
+
   return (
     <div>
       <div className="field">
-        <label className="field-label">From</label>
         <div className="is-flex is-flex-direction-column">
-          <div className="control mt-1 is-flex-grow-1">
-            <input
-              className="input"
-              type="text"
-              placeholder="0x..."
-              value={fromAddress}
-              readOnly
-            />
+          <div className="is-flex is-flex-direction-row is-align-items-center mb-3">
+            <div className="mr-5 w-70">From</div>
+            <div className="is-flex-grow-1">
+              <Dropdown
+                placeholder="Connect EVM Wallet"
+                options={[]}
+                onSelect={connectEVMWallet}
+                disabled={fromAddress !== ""}
+                leftIcon={"i-wallet"}
+                additionalOptions={additionalEvmOptions}
+                additionalOptionSelectedLabel={userAccount?.address}
+              />
+            </div>
           </div>
-          <div className="mt-3">
-            <button
-              type="button"
-              className="button is-ghost is-outlined-light is-tall"
-              onClick={() => connectEVMWallet()}
-              disabled={fromAddress !== ""}
-            >
-              {fromAddress ? "Connected to EVM Wallet" : "Connect EVM Wallet"}
-            </button>
-            {fromAddress && (
+          <div>
+            {fromAddress && !isLoadingBalance && (
               <p className="mt-2 has-text-light">Balance: {balance}</p>
             )}
+            {fromAddress && isLoadingBalance && (
+              <p className="mt-2 has-text-light">
+                Balance: <i className="fas fa-spinner fa-pulse" />
+              </p>
+            )}
           </div>
         </div>
       </div>
 
-      <div className="field">
-        <label className="field-label">Amount</label>
-        <div className="control has-icons-right mt-1">
-          <input
-            className="input"
-            type="text"
-            placeholder="0.00"
-            onChange={updateAmount}
-            value={amount}
-          />
-          <span className="icon is-right mt-1">
-            <p>TIA</p>
-          </span>
-        </div>
-        {!isAmountValid && hasTouchedForm && (
-          <p className="help is-danger mt-2">
-            Amount must be a number greater than 0
-          </p>
-        )}
-      </div>
-
       {isAnimating ? (
         <AnimatedArrowSpacer isAnimating={isAnimating} />
       ) : (
-        <div className="card-spacer" />
+        <div className="is-flex is-flex-direction-row">
+          <div className="">
+            <span className="icon is-medium">
+              <i className="i-arrow-up-arrow-down" />
+            </span>
+          </div>
+          <div className="ml-3 card-spacer" />
+        </div>
       )}
 
       <div className="field">
-        <label className="field-label">To</label>
         <div className="is-flex is-flex-direction-column">
+          <div className="is-flex is-flex-direction-row is-align-items-center">
+            <div className="mr-5 w-70">To</div>
+            <div className="is-flex-grow-1">
+              <Dropdown
+                placeholder="Select..."
+                options={ibcChainsOptions}
+                onSelect={selectIbcChain}
+                leftIcon={"i-wallet"}
+                additionalOptions={additionalIbcOptions}
+                additionalOptionSelectedLabel={fromAddress}
+              />
+            </div>
+            {selectedIbcChain && ibcCurrencyOptions && (
+              <div>
+                <Dropdown
+                  placeholder="Select a token"
+                  options={ibcCurrencyOptions}
+                  defaultOption={defaultIbcCurrencyOption}
+                  onSelect={selectIbcCurrency}
+                  disabled={!selectedIbcChain}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="is-flex is-flex-direction-row is-align-items-center">
+        <div className="card-spacer" />
+      </div>
+
+      <div className="field">
+        <div className="is-flex is-flex-direction-row is-align-items-center">
+          <div className="mr-5 w-70">Amount</div>
           <div className="control mt-1 is-flex-grow-1">
             <input
               className="input"
               type="text"
-              placeholder="celestia..."
-              value={toAddress}
-              readOnly
-            />
-          </div>
-          <div>
-            {!isToAddressValid && hasTouchedForm && (
-              <p className="help is-danger mt-2">
-                Must be a valid Celestia address
-              </p>
-            )}
-          </div>
-          <div className="mt-3 is-flex is-flex-direction-row is-justify-content-space-evenly">
-            <Dropdown
-              placeholder="Select a chain"
-              options={ibcChainsOptions}
-              onSelect={(selected) => selectIbcChain(selected)}
-              defaultOption={ibcChainsOptions[0]}
+              placeholder="0.00"
+              onChange={updateAmount}
+              value={amount}
             />
-            <button
-              type="button"
-              className="button is-ghost is-outlined-light is-tall"
-              onClick={() => connectKeplrWallet()}
-              disabled={toAddress !== ""}
-            >
-              {toAddress ? "Connected to Keplr Wallet" : "Connect Keplr Wallet"}
-            </button>
           </div>
         </div>
+        {!isAmountValid && hasTouchedForm && (
+          <div className="help is-danger mt-2">
+            Amount must be a number greater than 0
+          </div>
+        )}
       </div>
 
-      <div className="card-footer px-4 my-5">
+      <div className="card-footer mt-4">
         <button
           type="button"
-          className="button card-footer-item is-ghost is-outlined-light has-text-weight-bold"
+          className="button is-tall is-wide has-gradient-to-right-orange has-text-weight-bold has-text-white"
           onClick={handleWithdraw}
           disabled={
             !isAmountValid ||
diff --git a/web/src/config/chainConfigs/dusk.ts b/web/src/config/chainConfigs/dusk.ts
index 6f5086a..f4cb688 100644
--- a/web/src/config/chainConfigs/dusk.ts
+++ b/web/src/config/chainConfigs/dusk.ts
@@ -76,7 +76,7 @@ const CelestiaChainInfo: IbcChainInfo = {
       },
     },
   ],
-  ibcChannel: "channel-110",
+  ibcChannel: "channel-2",
   iconSourceUrl: "https://placehold.co/60x60/EEE/31343C",
 };
 
diff --git a/web/src/pages/BridgePage/BridgePage.tsx b/web/src/pages/BridgePage/BridgePage.tsx
index 211fda1..b18c435 100644
--- a/web/src/pages/BridgePage/BridgePage.tsx
+++ b/web/src/pages/BridgePage/BridgePage.tsx
@@ -43,7 +43,7 @@ export default function BridgePage(): React.ReactElement {
       <div className="container px-2">
         <div className="columns is-centered is-vcentered is-fullheight-with-navbar">
           <div className="column is-12-mobile is-8-tablet">
-            <div className="card p-5">
+            <div className="card p-6">
               <div className="tabs is-fullwidth is-medium">
                 <ul>
                   {tabs.map((tab) => (
diff --git a/web/src/styles/card-customizations.scss b/web/src/styles/card-customizations.scss
index a780804..b89b8ac 100644
--- a/web/src/styles/card-customizations.scss
+++ b/web/src/styles/card-customizations.scss
@@ -45,7 +45,7 @@
 
   & .card-spacer {
     border-top: 1px $astria-grey-dark solid;
-    margin: 1rem 1rem;
+    margin: 1rem 0;
     width: 100%;
   }