feat: improve display of exiting networks

forbole · Nov 24, 2023 · 72a2d14 · 72a2d14
1 parent fcdeb37
commit 72a2d14
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 25 deletions.
diff --git a/src/components/scroll_logo/index.tsx b/src/components/scroll_logo/index.tsx
@@ -19,9 +19,9 @@ function splitArray(array: any[], length: number) {
 const ScrollLogo = () => {
   const theme = useTheme();
 
-  const allNetworkData = allNetworkKeys.map((x: string | number) =>
-    getNetworkInfo(x),
-  );
+  const allNetworkData = allNetworkKeys
+    .map((x: string | number) => getNetworkInfo(x))
+    .filter(Boolean);
   const onlyLargeScreen = useMediaQuery(theme.breakpoints.up("laptop"), {
     noSsr: true,
   });

diff --git a/src/screens/staking/components/calculate_rewards/components/calculator/index.tsx b/src/screens/staking/components/calculate_rewards/components/calculator/index.tsx
@@ -17,7 +17,10 @@ import useTranslation from "next-translate/useTranslation";
 import Image from "next/legacy/image";
 import React from "react";
 
-import { handleNetworkClick } from "@src/utils/network_functions";
+import {
+  getCanClickNetwork,
+  handleNetworkClick,
+} from "@src/utils/network_functions";
 import {
   allNetworkKeys,
   getNetworkInfo,
@@ -44,8 +47,9 @@ const Calculator = () => {
 
   const networkData = allNetworkKeys
     .map((x: string | number) => getNetworkInfo(x))
+    .filter(Boolean)
     .filter((x) => !skippedRewardsNetworks.has(x.key))
-    .filter((x) => x.delegate);
+    .filter((x) => getCanClickNetwork(x));
 
   React.useEffect(() => {
     if (selectedToken === "") {
@@ -401,7 +405,6 @@ const Calculator = () => {
           </Box>
           <Box sx={styles.buttonDiv}>
             <Button
-              disabled={!selectedToken.delegate}
               onClick={() => {
                 handleNetworkClick(selectedToken);
               }}

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
@@ -60,8 +60,8 @@ const NetworkCard: FC<CardProp> = (props: CardProp) => {
   const isEmptyPopover =
     networksWithoutPopover.has(network.graphql) ||
     (!!networkSummary &&
-      !networkSummary.bonded &&
-      !networkSummary.APY &&
+      (!networkSummary.bonded || networkSummary.bonded < 0) &&
+      (!networkSummary.APY || networkSummary.APY < 0) &&
       !networkSummary.TVL);
 
   /* A variable that is used to render the popover. */
@@ -95,24 +95,20 @@ const NetworkCard: FC<CardProp> = (props: CardProp) => {
       {!networkSummary && <LinearProgress color="secondary" />}
       {!!networkSummary && (
         <Box onClickCapture={handleMobilePopoverClick}>
-          {!!networkSummary.bonded && (
+          {!!networkSummary.bonded && networkSummary.bonded > 0 && (
             <Box>
               <Typography variant="h6">
                 {network.denom?.toUpperCase()}
               </Typography>
               <Typography>{convertToMoney(networkSummary.bonded)}</Typography>
             </Box>
           )}
-          {!!networkSummary.APY && (
+          {!!networkSummary.APY && networkSummary.APY > 0 && (
             <Box>
               <Typography variant="h6">APY</Typography>
-              {networkSummary.APY <= 0 ? (
-                <Typography>-%</Typography>
-              ) : (
-                <Typography>{`${Math.round(
-                  networkSummary.APY * 100,
-                )}%`}</Typography>
-              )}
+              <Typography>{`${Math.round(
+                networkSummary.APY * 100,
+              )}%`}</Typography>
             </Box>
           )}
           {!!networkSummary.TVL && (

diff --git a/src/screens/staking/components/networks/index.tsx b/src/screens/staking/components/networks/index.tsx
@@ -28,9 +28,9 @@ const Networks = () => {
     ...oasisNetwork,
     ...radixNetwork,
   };
-  const allNetworkData = allNetworkKeys.map((x: string | number) =>
-    getNetworkInfo(x),
-  );
+  const allNetworkData = allNetworkKeys
+    .map((x: string | number) => getNetworkInfo(x))
+    .filter(Boolean);
 
   const sortedNetworks = [...allNetworkData].sort((a, b) =>
     a.name.localeCompare(b.name),

diff --git a/src/utils/network_info.ts b/src/utils/network_info.ts
@@ -57,6 +57,7 @@ const logos: IStringIndex = {
     image: "/images/network/agoric.png",
     key: "agoric",
     name: "Agoric",
+    label: "Agoric - BLD",
   },
   "akash": {
     address: "akashvaloper14kn0kk33szpwus9nh8n87fjel8djx0y0uzn073",
@@ -108,6 +109,7 @@ const logos: IStringIndex = {
     guide: "how-to-stake-btsg-on-bitsong",
     image: "/images/network/bitsong.png",
     key: "bitsong",
+    label: "BitSong - BTSG",
     name: "BitSong",
   },
   "crypto.org": {
@@ -150,6 +152,7 @@ const logos: IStringIndex = {
     heightSocket: "wss://ws.emoney.forbole.com",
     image: "/images/network/e_money.png",
     key: "e-money",
+    label: "e-Money - NGM",
     name: "eMoney",
   },
   "evmos": {
@@ -440,6 +443,7 @@ const logos: IStringIndex = {
     guide: "how-to-stake-sol-on-solana",
     image: "/images/network/solana.png",
     key: "solana",
+    label: "Solana - SOL",
     name: "Solana",
   },
   "cardano": {
@@ -655,7 +659,7 @@ const logos: IStringIndex = {
     guide: "how-to-stake-core-on-coreum",
     image: "/images/network/coreum.svg",
     key: "coreum",
-    label: "",
+    label: "Coreum - CORE",
     name: "Coreum",
   },
   "humansai": {
@@ -729,7 +733,7 @@ const logos: IStringIndex = {
     guide: "how-to-stake-lore-on-gitopia",
     image: "/images/network/gitopia.svg",
     key: "gitopia",
-    label: "",
+    label: "Gitopia - LORE",
     name: "Gitopia",
   },
   "rizon": {
@@ -741,12 +745,12 @@ const logos: IStringIndex = {
     name: "Rizon",
   },
   "sui": {
-    denom: "",
+    denom: "SUI",
     graphql: "sui",
     guide: "how-to-stake-sui-on-sui-network",
     image: "/images/network/sui.svg",
     key: "sui",
-    label: "",
+    label: "Sui - SUI",
     name: "Sui",
   },
   "picasso": {
@@ -759,7 +763,7 @@ const logos: IStringIndex = {
   },
 };
 
-export const getNetworkInfo = (key: string | number) => logos[key] ?? {};
+export const getNetworkInfo = (key: string | number) => logos[key] || null;
 
 const cosmosNetworkKeys = [
   "e-money",