From 61a36fde746104b18c379e83b9dcacfcd9751edd Mon Sep 17 00:00:00 2001
From: Ignacio <ignacio@forbole.com>
Date: Wed, 6 Mar 2024 12:16:43 +0800
Subject: [PATCH] feat: start with search and review modals

---
 src/features/core/components/base.tsx         |  13 ++
 src/features/staking/components/main-page.tsx |   1 -
 .../staking/components/modals/staking.tsx     |  90 +++++---
 .../staking/components/validators-table.tsx   | 200 ++++++++++--------
 4 files changed, 190 insertions(+), 114 deletions(-)

diff --git a/src/features/core/components/base.tsx b/src/features/core/components/base.tsx
index 0cfce4b..f34917f 100644
--- a/src/features/core/components/base.tsx
+++ b/src/features/core/components/base.tsx
@@ -224,3 +224,16 @@ export const FloatingDropdown = ({
     </div>
   );
 };
+
+type SearchInputProps = React.DetailedHTMLProps<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+>;
+
+export const SearchInput = (props: SearchInputProps) => (
+  <input
+    {...props}
+    className="border-none bg-transparent text-white outline-none"
+    style={{ borderBottom: "1px solid white" }}
+  />
+);
diff --git a/src/features/staking/components/main-page.tsx b/src/features/staking/components/main-page.tsx
index 9095701..81463bc 100644
--- a/src/features/staking/components/main-page.tsx
+++ b/src/features/staking/components/main-page.tsx
@@ -33,7 +33,6 @@ function StakingPage() {
         </div>
         <StakingOverview />
         {isShowingDetails && canShowDetail && <DelegationDetails />}
-        <Title>Validators</Title>
         <ValidatorsTable />
       </div>
       <StakingModals />
diff --git a/src/features/staking/components/modals/staking.tsx b/src/features/staking/components/modals/staking.tsx
index 00a0a35..2d7f19d 100644
--- a/src/features/staking/components/modals/staking.tsx
+++ b/src/features/staking/components/modals/staking.tsx
@@ -117,6 +117,68 @@ const StakingModal = () => {
             );
           }
 
+          if (step === "review") {
+            return (
+              <>
+                <div className="text-center">
+                  <div className="mb-[16px]">
+                    <HeroText>REVIEW</HeroText>
+                  </div>
+                  <div>
+                    Get ready to stake your XION token with{" "}
+                    {validator.description.moniker}. Press 'Confirm' to proceed.
+                  </div>
+                </div>
+                <div className="mb-[32px] mt-[32px] flex w-full flex-col items-center justify-center gap-[12px]">
+                  <Heading8>Staked Amount</Heading8>
+                  <Heading2>{amountXION}</Heading2>
+                  <Heading8>$24N</Heading8>
+                </div>
+                {!!memo && (
+                  <div className="mb-[32px] text-center italic">
+                    <div>{memo}</div>
+                  </div>
+                )}
+                <Button
+                  disabled={isLoading}
+                  onClick={() => {
+                    if (!client) return;
+
+                    setIsLoading(true);
+
+                    const addresses: StakeAddresses = {
+                      delegator: account.bech32Address,
+                      validator: validator.operatorAddress,
+                    };
+
+                    stakeValidatorAction(
+                      addresses,
+                      getXionCoin(amountXIONParsed),
+                      memo,
+                      client,
+                      staking,
+                    )
+                      .then((fetchDataFn) => {
+                        setStep("completed");
+
+                        return fetchDataFn();
+                      })
+                      .catch(() => {
+                        toast("Staking error", {
+                          type: "error",
+                        });
+                      })
+                      .finally(() => {
+                        setIsLoading(false);
+                      });
+                  }}
+                >
+                  CONFIRM
+                </Button>
+              </>
+            );
+          }
+
           const getHasAmountError = () =>
             !amountUSD ||
             !availableTokens ||
@@ -135,33 +197,7 @@ const StakingModal = () => {
             )
               return;
 
-            setIsLoading(true);
-
-            const addresses: StakeAddresses = {
-              delegator: account.bech32Address,
-              validator: validator.operatorAddress,
-            };
-
-            stakeValidatorAction(
-              addresses,
-              getXionCoin(amountXIONParsed),
-              memo,
-              client,
-              staking,
-            )
-              .then((fetchDataFn) => {
-                setStep("completed");
-
-                return fetchDataFn();
-              })
-              .catch(() => {
-                toast("Staking error", {
-                  type: "error",
-                });
-              })
-              .finally(() => {
-                setIsLoading(false);
-              });
+            setStep("review");
           };
 
           return (
diff --git a/src/features/staking/components/validators-table.tsx b/src/features/staking/components/validators-table.tsx
index 3f51a38..be8d2cd 100644
--- a/src/features/staking/components/validators-table.tsx
+++ b/src/features/staking/components/validators-table.tsx
@@ -3,7 +3,12 @@
 import BigNumber from "bignumber.js";
 import { memo, useState } from "react";
 
-import { ButtonPill, NavLink } from "@/features/core/components/base";
+import {
+  ButtonPill,
+  NavLink,
+  SearchInput,
+  Title,
+} from "@/features/core/components/base";
 import { HeaderTitleBase } from "@/features/core/components/table";
 
 import { useStaking } from "../context/hooks";
@@ -128,112 +133,135 @@ const HeaderTitle = HeaderTitleBase<SortMethod>;
 const ValidatorsTable = () => {
   const { isConnected, staking } = useStaking();
   const [sortMethod, setSortMethod] = useState<SortMethod>("none");
+  const [searchValue, setSearchValue] = useState<string>("");
 
   const { validators } = staking.state;
 
   if (!validators?.items.length) return null;
 
-  const sortedItems = validators.items.slice().sort((a, b) => {
-    if (sortMethod === "none") return 0;
+  const sortedItems = validators.items
+    .slice()
+    .sort((a, b) => {
+      if (sortMethod === "none") return 0;
+
+      if (["voting-power-asc", "voting-power-desc"].includes(sortMethod)) {
+        const votingPowerA = getVotingPowerPerc(a.tokens, staking.state);
+        const votingPowerB = getVotingPowerPerc(b.tokens, staking.state);
 
-    if (["voting-power-asc", "voting-power-desc"].includes(sortMethod)) {
-      const votingPowerA = getVotingPowerPerc(a.tokens, staking.state);
-      const votingPowerB = getVotingPowerPerc(b.tokens, staking.state);
+        if (!votingPowerA || !votingPowerB) return 0;
 
-      if (!votingPowerA || !votingPowerB) return 0;
+        return sortMethod === "voting-power-asc"
+          ? votingPowerA - votingPowerB
+          : votingPowerB - votingPowerA;
+      }
 
-      return sortMethod === "voting-power-asc"
-        ? votingPowerA - votingPowerB
-        : votingPowerB - votingPowerA;
-    }
+      if (["commission-asc", "commission-desc"].includes(sortMethod)) {
+        const commissionA = parseFloat(a.commission.commissionRates.rate);
+        const commissionB = parseFloat(b.commission.commissionRates.rate);
 
-    if (["commission-asc", "commission-desc"].includes(sortMethod)) {
-      const commissionA = parseFloat(a.commission.commissionRates.rate);
-      const commissionB = parseFloat(b.commission.commissionRates.rate);
+        if (!commissionA || !commissionB) return 0;
 
-      if (!commissionA || !commissionB) return 0;
+        return sortMethod === "commission-asc"
+          ? commissionA - commissionB
+          : commissionB - commissionA;
+      }
 
-      return sortMethod === "commission-asc"
-        ? commissionA - commissionB
-        : commissionB - commissionA;
-    }
+      if (["name-asc", "name-desc"].includes(sortMethod)) {
+        const nameA = a.description.moniker.toLowerCase();
+        const nameB = b.description.moniker.toLowerCase();
 
-    if (["name-asc", "name-desc"].includes(sortMethod)) {
-      const nameA = a.description.moniker.toLowerCase();
-      const nameB = b.description.moniker.toLowerCase();
+        if (!nameA || !nameB) return 0;
 
-      if (!nameA || !nameB) return 0;
+        return sortMethod === "name-asc"
+          ? nameA.localeCompare(nameB)
+          : nameB.localeCompare(nameA);
+      }
 
-      return sortMethod === "name-asc"
-        ? nameA.localeCompare(nameB)
-        : nameB.localeCompare(nameA);
-    }
+      if (["staked-asc", "staked-desc"].includes(sortMethod)) {
+        const aTokens = new BigNumber(a.tokens);
+        const bTokens = new BigNumber(b.tokens);
 
-    if (["staked-asc", "staked-desc"].includes(sortMethod)) {
-      const aTokens = new BigNumber(a.tokens);
-      const bTokens = new BigNumber(b.tokens);
+        return sortMethod === "staked-asc"
+          ? aTokens.minus(bTokens).toNumber()
+          : bTokens.minus(aTokens).toNumber();
+      }
 
-      return sortMethod === "staked-asc"
-        ? aTokens.minus(bTokens).toNumber()
-        : bTokens.minus(aTokens).toNumber();
-    }
+      return 0;
+    })
+    .filter((validator) => {
+      if (!searchValue) return true;
 
-    return 0;
-  });
+      const moniker = validator.description.moniker.toLowerCase();
+      const operatorAddress = validator.operatorAddress.toLowerCase();
+
+      return (
+        moniker.includes(searchValue.toLowerCase()) ||
+        operatorAddress.includes(searchValue.toLowerCase())
+      );
+    });
 
   return (
-    <div className="overflow-hidden rounded-[24px] bg-bg-600 pb-4 text-typo-100">
-      <div
-        className="grid w-full items-center justify-between gap-2 bg-bg-500 p-4 uppercase"
-        style={gridStyle}
-      >
-        <div />
-        <HeaderTitle
-          onSort={setSortMethod}
-          sort={sortMethod}
-          sorting={["name-asc", "name-desc"]}
-        >
-          Validator
-        </HeaderTitle>
-        <HeaderTitle
-          onSort={setSortMethod}
-          sort={sortMethod}
-          sorting={["staked-asc", "staked-desc"]}
-        >
-          <div className="text-right">Staked Amount</div>
-        </HeaderTitle>
-        <HeaderTitle
-          onSort={setSortMethod}
-          sort={sortMethod}
-          sorting={["commission-asc", "commission-desc"]}
-        >
-          <div className="text-right">Commission</div>
-        </HeaderTitle>
-        <HeaderTitle
-          onSort={setSortMethod}
-          sort={sortMethod}
-          sorting={["voting-power-asc", "voting-power-desc"]}
+    <>
+      <div className="flex w-full flex-row justify-start gap-[16px]">
+        <Title>Validators</Title>
+        <SearchInput
+          onChange={(e) => setSearchValue(e.target.value)}
+          value={searchValue}
+        />
+      </div>
+      <div className="overflow-hidden rounded-[24px] bg-bg-600 pb-4 text-typo-100">
+        <div
+          className="grid w-full items-center justify-between gap-2 bg-bg-500 p-4 uppercase"
+          style={gridStyle}
         >
-          <div className="text-right">Voting Power</div>
-        </HeaderTitle>
+          <div />
+          <HeaderTitle
+            onSort={setSortMethod}
+            sort={sortMethod}
+            sorting={["name-asc", "name-desc"]}
+          >
+            Validator
+          </HeaderTitle>
+          <HeaderTitle
+            onSort={setSortMethod}
+            sort={sortMethod}
+            sorting={["staked-asc", "staked-desc"]}
+          >
+            <div className="text-right">Staked Amount</div>
+          </HeaderTitle>
+          <HeaderTitle
+            onSort={setSortMethod}
+            sort={sortMethod}
+            sorting={["commission-asc", "commission-desc"]}
+          >
+            <div className="text-right">Commission</div>
+          </HeaderTitle>
+          <HeaderTitle
+            onSort={setSortMethod}
+            sort={sortMethod}
+            sorting={["voting-power-asc", "voting-power-desc"]}
+          >
+            <div className="text-right">Voting Power</div>
+          </HeaderTitle>
+        </div>
+        {sortedItems.map((validator) => (
+          <ValidatorRow
+            disabled={!isConnected}
+            key={validator.operatorAddress}
+            onStake={() => {
+              staking.dispatch(
+                setModalOpened({
+                  content: { validator },
+                  type: "delegate",
+                }),
+              );
+            }}
+            staking={staking}
+            validator={validator}
+          />
+        ))}
       </div>
-      {sortedItems.map((validator) => (
-        <ValidatorRow
-          disabled={!isConnected}
-          key={validator.operatorAddress}
-          onStake={() => {
-            staking.dispatch(
-              setModalOpened({
-                content: { validator },
-                type: "delegate",
-              }),
-            );
-          }}
-          staking={staking}
-          validator={validator}
-        />
-      ))}
-    </div>
+    </>
   );
 };