feat: apply improvements from solana

forbole · Mar 26, 2024 · 7e19cdb · 7e19cdb
1 parent 9aa094f
commit 7e19cdb
Show file tree

Hide file tree

Showing 15 changed files with 340 additions and 200 deletions.
diff --git a/public/images/network/solana.svg b/public/images/network/solana.svg
diff --git a/...ens/staking/components/networks/components/network_grid/components/network_card/index.tsx b/...ens/staking/components/networks/components/network_grid/components/network_card/index.tsx
@@ -71,8 +71,10 @@ const NetworkCard = ({
     </div>
   );
 
+  const forceDisplay = network.key === process.env.NEXT_PUBLIC_STAKING_POPOVER;
+
   const popover =
-    isEmptyPopover || network.name !== showPopover ? null : (
+    !forceDisplay && (isEmptyPopover || network.name !== showPopover) ? null : (
       <PopOver
         canClickNetwork={canClickNetwork}
         handleExploreClick={handleExploreClick}

diff --git a/...g/components/networks/components/network_grid/components/network_card/popover.module.scss b/...g/components/networks/components/network_grid/components/network_card/popover.module.scss
@@ -102,57 +102,6 @@ $popover-background: linear-gradient(
   width: 100%;
 }
 
-.stakingData {
-  background: #ffffff8f;
-  border-radius: 8px;
-  box-shadow:
-    0 10px 32px -4px #0226e11a,
-    0 6px 14px -6px #0226e11f;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  line-break: anywhere;
-  margin-bottom: 8px;
-  max-width: 100%;
-  padding: 12px 16px;
-  width: 100%;
-
-  .unbonding,
-  .rewards,
-  .total {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    font-size: 16px;
-    justify-content: space-between;
-    width: 100%;
-
-    > div {
-      font-size: 16px;
-      font-style: normal;
-      font-weight: 600;
-      letter-spacing: 0.032px;
-      line-height: 20px;
-      text-shadow: $box-shadow-variant-3;
-    }
-
-    > div:first-child {
-      color: #25282d;
-      text-align: left;
-    }
-
-    > div:last-child {
-      text-align: right;
-    }
-  }
-
-  .rewards {
-    > div:nth-child(2) {
-      color: #059c78;
-    }
-  }
-}
-
 .buttons {
   display: flex;
   flex-direction: column;
@@ -177,16 +126,3 @@ $popover-background: linear-gradient(
 body .stake {
   font-size: 16px;
 }
-
-.totalValue {
-  > div:nth-child(2) {
-    color: #616161;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    letter-spacing: 0.308px;
-    line-height: 20px;
-    text-align: right;
-    text-shadow: $box-shadow-variant-3;
-  }
-}
diff --git a/...s/staking/components/networks/components/network_grid/components/network_card/popover.tsx b/...s/staking/components/networks/components/network_grid/components/network_card/popover.tsx
@@ -6,18 +6,15 @@ import type {
   ReactNode,
   SetStateAction,
 } from "react";
-import { useContext, useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 
 import CtaButton from "@src/components/cta-button";
 import EmptyButton from "@src/components/empty-button";
 import HighlightButton from "@src/components/highlight-button";
 import CloseIcon from "@src/components/icons/icon_cross.svg";
 import IconInfoCircle from "@src/components/icons/info-circle.svg";
 import { tooltipId } from "@src/components/tooltip";
-import {
-  StakingContext,
-  useStakingRef,
-} from "@src/screens/staking/lib/staking_sdk/context";
+import { useStakingRef } from "@src/screens/staking/lib/staking_sdk/context";
 import {
   fetchCoinPriceForNetwork,
   getNetworkStakingInfo,
@@ -27,12 +24,9 @@ import type { NetworkClaimableRewards } from "@src/screens/staking/lib/staking_s
 import {
   getAccountsForNetwork,
   getClaimableRewardsForNetwork,
-  getCoinPriceForNetwork,
   getHasNetworkSupportedWallet,
   getNetworkTVL,
   getNetworkVotingPower,
-  getStakedDataForNetwork,
-  getUnbondingTokensForNetwork,
 } from "@src/screens/staking/lib/staking_sdk/context/selectors";
 import {
   networkKeyToNetworkId,
@@ -42,12 +36,8 @@ import type {
   Account,
   StakingNetworkInfo,
 } from "@src/screens/staking/lib/staking_sdk/core";
-import type { Coin } from "@src/screens/staking/lib/staking_sdk/core/base";
 import { WalletId } from "@src/screens/staking/lib/staking_sdk/core/base";
-import {
-  formatCoin,
-  formatStakedDataUSD,
-} from "@src/screens/staking/lib/staking_sdk/formatters";
+import { formatCoin } from "@src/screens/staking/lib/staking_sdk/formatters";
 import {
   accountHasDelegations,
   accountHasRewards,
@@ -58,6 +48,7 @@ import type { Network, NetworkKey } from "@src/utils/network_info";
 
 import type { ParamsProps } from "../../config";
 import * as styles from "./popover.module.scss";
+import StakingDataBox from "./staking_data_box";
 
 type PopOverProps = {
   canClickNetwork: boolean;
@@ -78,6 +69,7 @@ const PopOver = ({
 }: PopOverProps) => {
   const networkNetworkId = networkKeyToNetworkId[network.key as NetworkKey];
   const stakingNetworkId = networkKeyToNetworkId[network.key as NetworkKey];
+  const nodeRef = useRef<HTMLDivElement | null>(null);
 
   const stakingRef = useStakingRef();
 
@@ -95,10 +87,21 @@ const PopOver = ({
   const [stakingNetworkInfo, setStakingNetworkInfo] =
     useState<null | StakingNetworkInfo>(null);
 
-  const { state: stakingState } = useContext(StakingContext);
-
+  const { state: stakingState } = stakingRef.current;
   const { hasInit } = stakingState;
 
+  useEffect(() => {
+    if (!nodeRef.current) return;
+
+    const box = nodeRef.current.getBoundingClientRect();
+
+    if (box.left < 0) {
+      (nodeRef.current as HTMLElement).style.left = "0";
+    } else if (box.right > window.innerWidth) {
+      (nodeRef.current as HTMLElement).style.right = "0";
+    }
+  }, [nodeRef]);
+
   useEffect(() => {
     if (stakingNetworkId) {
       getNetworkStakingInfo(stakingRef.current, stakingNetworkId).then(
@@ -109,50 +112,30 @@ const PopOver = ({
     }
   }, [stakingNetworkId, stakingRef]);
 
-  const { accounts, claimableRewards, stakedData, unbondingTokens } =
-    useMemo(() => {
-      const wallet = WalletId.Keplr;
-
-      const result = {
-        accounts: null as Account[] | null,
-        claimableRewards: null as NetworkClaimableRewards | null,
-        stakedData: null as Coin | null,
-        unbondingTokens: null as { period: string; text: string } | null,
-      };
-
-      if (!!stakingNetworkId && !!wallet) {
-        result.accounts = getAccountsForNetwork(stakingState, stakingNetworkId);
+  const { accounts, claimableRewards } = useMemo(() => {
+    const wallet = WalletId.Keplr;
 
-        if (!result.accounts?.length) {
-          return result;
-        }
+    const result = {
+      accounts: null as Account[] | null,
+      claimableRewards: null as NetworkClaimableRewards | null,
+    };
 
-        result.stakedData = getStakedDataForNetwork(
-          stakingRef.current.state,
-          stakingNetworkId,
-        );
+    if (!!stakingNetworkId && !!wallet) {
+      result.accounts = getAccountsForNetwork(stakingState, stakingNetworkId);
 
-        result.claimableRewards =
-          getClaimableRewardsForNetwork(
-            stakingRef.current.state,
-            stakingNetworkId,
-          ) || null;
+      if (!result.accounts?.length) {
+        return result;
+      }
 
-        const unbonding = getUnbondingTokensForNetwork(
+      result.claimableRewards =
+        getClaimableRewardsForNetwork(
           stakingRef.current.state,
           stakingNetworkId,
-        );
-
-        if (unbonding) {
-          result.unbondingTokens = {
-            period: new Date(Number(unbonding.period) * 1000).toLocaleString(),
-            text: formatCoin(unbonding.coin, { decimals: 4 }),
-          };
-        }
-      }
+        ) || null;
+    }
 
-      return result;
-    }, [stakingState, stakingNetworkId, stakingRef]);
+    return result;
+  }, [stakingState, stakingNetworkId, stakingRef]);
 
   useEffect(() => {
     fetchCoinPriceForNetwork(stakingRef.current, stakingNetworkId);
@@ -161,31 +144,13 @@ const PopOver = ({
   const accountsWithDelegations = accounts?.filter(accountHasDelegations);
   const accountsWithRewards = accounts?.filter(accountHasRewards);
 
-  const displayedRewards = claimableRewards
-    ? `+${formatCoin(claimableRewards, { decimals: 4 })}`
-    : null;
-
-  const displayedStaked = (() => {
-    if (!stakedData || !stakingNetworkId) return null;
-
-    const coinPrice = getCoinPriceForNetwork(
-      stakingRef.current.state,
-      stakingNetworkId,
-    );
-
-    if (!coinPrice) return [formatCoin(stakedData)];
-
-    const stakedDataUSD = formatStakedDataUSD(stakedData, coinPrice);
-
-    return [formatCoin(stakedData), stakedDataUSD].filter(Boolean);
-  })();
-
   return (
     <div
       className={styles.popover}
       onMouseLeave={() => {
         setShowPopover("");
       }}
+      ref={nodeRef}
     >
       <CloseIcon
         className={styles.closeBtn}
@@ -194,47 +159,7 @@ const PopOver = ({
       />
       <div>{networkImage}</div>
       {network.name && <div className={styles.name}>{network.name}</div>}
-      {!![stakedData, claimableRewards, unbondingTokens].filter(Boolean)
-        .length && (
-        <div className={styles.stakingData}>
-          {displayedStaked && (
-            <div className={styles.total}>
-              <div>{t("totalStaked")}</div>
-              <div className={styles.totalValue}>
-                {displayedStaked.map((item, itemIdx) => (
-                  <div key={itemIdx}>{item}</div>
-                ))}
-              </div>
-            </div>
-          )}
-          {!!claimableRewards && (
-            <div className={styles.rewards}>
-              <div>{t("claimableRewards")}</div>
-              <div
-                data-tooltip-content={formatCoin(claimableRewards, {
-                  maximumFractionDigits: 12,
-                })}
-                data-tooltip-id={tooltipId}
-              >
-                {displayedRewards}
-              </div>
-            </div>
-          )}
-          {!!unbondingTokens && (
-            <div className={styles.unbonding}>
-              <div>{t("unbondingTokens")}</div>
-              <div
-                data-tooltip-content={t("popover.unbondingTooltip", {
-                  period: unbondingTokens.period,
-                })}
-                data-tooltip-id={tooltipId}
-              >
-                {unbondingTokens.text}
-              </div>
-            </div>
-          )}
-        </div>
-      )}
+      <StakingDataBox network={network} />
       {!!networkSummary && (
         <div className={styles.dataBox}>
           {(() => {
@@ -257,10 +182,8 @@ const PopOver = ({
 
               return networkSummary?.bonded > 0
                 ? [
-                    t("votingPower"),
-                    `${convertToMoney(
-                      networkSummary.bonded,
-                    )} ${network.denom?.toUpperCase()}`,
+                    network.denom?.toUpperCase(),
+                    convertToMoney(networkSummary.bonded),
                   ]
                 : null;
             })();