From e111c8cef618f8f190de241ff3784241f960fb9e Mon Sep 17 00:00:00 2001
From: Ignacio <ignacio@forbole.com>
Date: Thu, 28 Mar 2024 13:45:39 +0800
Subject: [PATCH] feat: improve stake accounts ui

---
 .../components/network_card/popover.tsx       | 11 ++++--
 .../network_card/stake_accounts.module.scss   | 38 +++++++++++++++++++
 .../network_card/stake_accounts.tsx           | 17 +++++++--
 .../network_card/staking_data_box.module.scss | 13 +++++++
 .../network_card/staking_data_box.tsx         | 24 ++++++++----
 5 files changed, 89 insertions(+), 14 deletions(-)

diff --git a/src/screens/staking/components/networks/components/network_grid/components/network_card/popover.tsx b/src/screens/staking/components/networks/components/network_grid/components/network_card/popover.tsx
index 29087782..9a949d28 100644
--- a/src/screens/staking/components/networks/components/network_grid/components/network_card/popover.tsx
+++ b/src/screens/staking/components/networks/components/network_grid/components/network_card/popover.tsx
@@ -70,6 +70,7 @@ const PopOver = ({
   const networkNetworkId = networkKeyToNetworkId[network.key as NetworkKey];
   const stakingNetworkId = networkKeyToNetworkId[network.key as NetworkKey];
   const nodeRef = useRef<HTMLDivElement | null>(null);
+  const [isContentFocused, setIsContentFocused] = useState(false);
 
   const stakingRef = useStakingRef();
 
@@ -142,7 +143,7 @@ const PopOver = ({
   }, [stakingRef, stakingNetworkId]);
 
   // @TODO: Remove
-  const [, rerender] = useState(0);
+  const [rerenderKey, rerender] = useState(0);
 
   const accountsWithDelegations = accounts?.filter(accountHasDelegations);
   const accountsWithRewards = accounts?.filter(accountHasRewards);
@@ -169,8 +170,12 @@ const PopOver = ({
         Rerender
       </button>
       {network.name && <div className={styles.name}>{network.name}</div>}
-      <StakingDataBox network={network} />
-      {!!networkSummary && (
+      <StakingDataBox
+        key={rerenderKey}
+        network={network}
+        onFocusContent={setIsContentFocused}
+      />
+      {!!networkSummary && !isContentFocused && (
         <div className={styles.dataBox}>
           {(() => {
             const votingPower = (() => {
diff --git a/src/screens/staking/components/networks/components/network_grid/components/network_card/stake_accounts.module.scss b/src/screens/staking/components/networks/components/network_grid/components/network_card/stake_accounts.module.scss
index 04997b11..f8b3bb5f 100644
--- a/src/screens/staking/components/networks/components/network_grid/components/network_card/stake_accounts.module.scss
+++ b/src/screens/staking/components/networks/components/network_grid/components/network_card/stake_accounts.module.scss
@@ -109,3 +109,41 @@
     0 8px 22px rgba(2, 38, 225, 0.12),
     0 14px 64px rgba(2, 38, 225, 0.12);
 }
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 8px 12px;
+}
+
+.nav {
+  background: transparent;
+  border: none;
+  transform: rotate(90deg);
+}
+
+.headerCopy {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  font-size: 16px;
+  font-weight: 600;
+  gap: 4px;
+  letter-spacing: 0.002em;
+  line-height: 20px;
+  text-align: left;
+  transform: translateX(-8px);
+}
+
+.stakeAccountsNum {
+  align-items: center;
+  background: #8484ea;
+  border-radius: 50%;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  min-height: 30px;
+  min-width: 30px;
+  padding: 2px;
+}
diff --git a/src/screens/staking/components/networks/components/network_grid/components/network_card/stake_accounts.tsx b/src/screens/staking/components/networks/components/network_grid/components/network_card/stake_accounts.tsx
index 53aadccc..f9859bbe 100644
--- a/src/screens/staking/components/networks/components/network_grid/components/network_card/stake_accounts.tsx
+++ b/src/screens/staking/components/networks/components/network_grid/components/network_card/stake_accounts.tsx
@@ -1,6 +1,8 @@
 import useTranslation from "next-translate/useTranslation";
+import type { PropsWithChildren } from "react";
 import { useEffect, useMemo } from "react";
 
+import IconChevron from "@src/components/icons/icon_chevron.svg";
 import { useStakingRef } from "@src/screens/staking/lib/staking_sdk/context";
 import { fetchCoinPriceForNetwork } from "@src/screens/staking/lib/staking_sdk/context/actions";
 import type { NetworkClaimableRewards } from "@src/screens/staking/lib/staking_sdk/context/selectors";
@@ -20,6 +22,10 @@ import type { Network, NetworkKey } from "@src/utils/network_info";
 
 import * as styles from "./stake_accounts.module.scss";
 
+export const StakeAccountsNum = ({ children }: PropsWithChildren) => (
+  <div className={styles.stakeAccountsNum}>{children}</div>
+);
+
 type Props = {
   network: Network;
   onClose: () => void;
@@ -83,9 +89,14 @@ const StakeAccounts = ({ network, onClose }: Props) => {
 
   return (
     <div>
-      <div>
-        <button onClick={onClose}>{"<"}</button> {t("accounts")}{" "}
-        {stakeAccounts?.length}
+      <div className={styles.header}>
+        <span className={styles.headerCopy}>
+          <button className={styles.nav} onClick={onClose}>
+            <IconChevron />
+          </button>{" "}
+          {t("accounts")}
+        </span>
+        <StakeAccountsNum>{stakeAccounts?.length}</StakeAccountsNum>
       </div>
       <div>
         {stakeAccounts?.map((account) => {
diff --git a/src/screens/staking/components/networks/components/network_grid/components/network_card/staking_data_box.module.scss b/src/screens/staking/components/networks/components/network_grid/components/network_card/staking_data_box.module.scss
index fe2f1405..2c8dba0e 100644
--- a/src/screens/staking/components/networks/components/network_grid/components/network_card/staking_data_box.module.scss
+++ b/src/screens/staking/components/networks/components/network_grid/components/network_card/staking_data_box.module.scss
@@ -15,6 +15,7 @@
   padding: 12px 16px;
   width: 100%;
 
+  .stakeAccounts,
   .unbonding,
   .rewards,
   .total {
@@ -63,3 +64,15 @@
     text-shadow: $box-shadow-variant-3;
   }
 }
+
+.nav {
+  background: transparent;
+  border: none;
+  transform: rotate(-90deg);
+}
+
+.navWrapper {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+}
diff --git a/src/screens/staking/components/networks/components/network_grid/components/network_card/staking_data_box.tsx b/src/screens/staking/components/networks/components/network_grid/components/network_card/staking_data_box.tsx
index 26b869cc..628adcb4 100644
--- a/src/screens/staking/components/networks/components/network_grid/components/network_card/staking_data_box.tsx
+++ b/src/screens/staking/components/networks/components/network_grid/components/network_card/staking_data_box.tsx
@@ -1,6 +1,7 @@
 import useTranslation from "next-translate/useTranslation";
 import { useEffect, useMemo, useState } from "react";
 
+import IconChevron from "@src/components/icons/icon_chevron.svg";
 import { tooltipId } from "@src/components/tooltip";
 import { useStakingRef } from "@src/screens/staking/lib/staking_sdk/context";
 import { fetchCoinPriceForNetwork } from "@src/screens/staking/lib/staking_sdk/context/actions";
@@ -22,14 +23,15 @@ import {
 import type { StakeAccount } from "@src/screens/staking/lib/staking_sdk/staking_client_types";
 import type { Network, NetworkKey } from "@src/utils/network_info";
 
-import StakeAccounts from "./stake_accounts";
+import StakeAccounts, { StakeAccountsNum } from "./stake_accounts";
 import * as styles from "./staking_data_box.module.scss";
 
 type PopOverProps = {
   network: Network;
+  onFocusContent: (isFocused: boolean) => void;
 };
 
-const StakingDataBox = ({ network }: PopOverProps) => {
+const StakingDataBox = ({ network, onFocusContent }: PopOverProps) => {
   const stakingNetworkId = networkKeyToNetworkId[network.key as NetworkKey];
 
   const [isDisplayingStakeAccounts, setIsDisplayingStakeAccounts] =
@@ -39,6 +41,11 @@ const StakingDataBox = ({ network }: PopOverProps) => {
 
   const { t } = useTranslation("staking");
 
+  const setStakeAccountsDisplay = (isDisplayed: boolean) => {
+    setIsDisplayingStakeAccounts(isDisplayed);
+    onFocusContent(isDisplayed);
+  };
+
   const { claimableRewards, stakeAccounts, stakedData, unbondingTokens } =
     useMemo(() => {
       const wallet = WalletId.Keplr;
@@ -124,7 +131,7 @@ const StakingDataBox = ({ network }: PopOverProps) => {
       return (
         <StakeAccounts
           network={network}
-          onClose={() => setIsDisplayingStakeAccounts(false)}
+          onClose={() => setStakeAccountsDisplay(false)}
         />
       );
     }
@@ -172,16 +179,17 @@ const StakingDataBox = ({ network }: PopOverProps) => {
           </div>
         )}
         {!!stakeAccounts?.length && (
-          <div className={styles.unbonding}>
+          <div className={styles.stakeAccounts}>
             <div>{t("stakeAccounts")}</div>
-            <div>
-              {stakeAccounts.length}{" "}
+            <div className={styles.navWrapper}>
+              <StakeAccountsNum>{stakeAccounts.length}</StakeAccountsNum>{" "}
               <button
+                className={styles.nav}
                 onClick={() => {
-                  setIsDisplayingStakeAccounts(true);
+                  setStakeAccountsDisplay(true);
                 }}
               >
-                {">"}
+                <IconChevron />
               </button>
             </div>
           </div>