chore: hide usd value if it is zero (#88)

* chore: hide usd value if it is zero * chore: clean error when fetching transfers
sygmaprotocol · Oct 10, 2023 · fd8bee5 · fd8bee5
1 parent 95be539
commit fd8bee5
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/src/components/ExplorerTable/ExplorerTable.tsx b/src/components/ExplorerTable/ExplorerTable.tsx
@@ -15,6 +15,7 @@ import {
   getFormatedFee,
   formatConvertedAmount,
   formatTransferType,
+  formatAmountDecimals,
 } from "../../utils/Helpers"
 import { useStyles } from "./styles"
 
@@ -65,7 +66,9 @@ const ExplorerTable: React.FC<ExplorerTable> = ({ state, sharedConfig }: Explore
 
       let formatedConvertedAmount
 
-      if (usdValue !== null) {
+      const amountWithFormatedDecimals = formatAmountDecimals(amount)
+
+      if (usdValue !== null && typeof usdValue === "number") {
         formatedConvertedAmount = formatConvertedAmount(usdValue)
       }
 
@@ -120,9 +123,9 @@ const ExplorerTable: React.FC<ExplorerTable> = ({ state, sharedConfig }: Explore
             <span className={classes.amountInfo}>
               <div className={classes.amountContainer}>
                 <span>
-                  {amount} {resourceID !== "" && getResourceInfo(resourceID, fromDomainInfo!)}
+                  {amountWithFormatedDecimals} {resourceID !== "" && getResourceInfo(resourceID, fromDomainInfo!)}
                 </span>
-                {usdValue !== null && <span>{formatedConvertedAmount}</span>}
+                {usdValue !== null && usdValue !== 0 && <span>{formatedConvertedAmount}</span>}
               </div>
             </span>
           </TableCell>

diff --git a/src/pages/DetailView/DetailView.tsx b/src/pages/DetailView/DetailView.tsx
@@ -1,7 +1,6 @@
-import { CircularProgress, Tooltip, Typography } from "@mui/material"
-import { Box, Container } from "@mui/system"
+import { CircularProgress, Tooltip, Typography, Container, Box } from "@mui/material"
 import { useReducer } from "react"
-import { Link, useLocation, useParams } from "react-router-dom"
+import { Link, useLocation } from "react-router-dom"
 import ContentCopyIcon from "@mui/icons-material/ContentCopy"
 import ArrowBackIcon from "@mui/icons-material/ArrowBack"
 import dayjs from "dayjs"
@@ -207,7 +206,7 @@ export default function DetailView() {
               <span>
                 {transfer?.amount} {symbol}
               </span>
-              {usdValue && <span>${formatedConvertedAmount}</span>}
+              {usdValue !== null && usdValue !== 0 && <span>${formatedConvertedAmount}</span>}
             </div>
           </span>
         </div>

diff --git a/src/pages/ExplorerPage/reducer.ts b/src/pages/ExplorerPage/reducer.ts
@@ -21,6 +21,7 @@ export function reducer(state: ExplorerPageState, action: TransferActions): Expl
         ...state,
         transfers: action.payload,
         loading: "loading",
+        error: undefined,
       }
     case "fetch_transfer_error":
       return {
@@ -33,6 +34,7 @@ export function reducer(state: ExplorerPageState, action: TransferActions): Expl
         ...state,
         transfers: action.payload,
         loading: "loading",
+        error: undefined,
       }
     case "fetch_transfer_by_sender_error":
       return {

diff --git a/src/utils/Helpers.tsx b/src/utils/Helpers.tsx
@@ -131,9 +131,10 @@ export const sanitizeTransferData = (transfers: Transfer[]): Transfer[] => {
         } else if (key === "usdValue") {
           // @ts-ignore-next-line
           sanitizedTransfer[key as keyof Transfer] = 0
+        } else {
+          // @ts-ignore-next-line
+          sanitizedTransfer[key as keyof Transfer] = ""
         }
-        // @ts-ignore-next-line
-        sanitizedTransfer[key as keyof Transfer] = ""
       }
     }
     sanitizedTransferData.push(sanitizedTransfer)
@@ -198,6 +199,16 @@ export const formatConvertedAmount = (amount: number): string => {
   return "$0.00"
 }
 
+export const formatAmountDecimals = (amount: string): string => {
+  if (!amount) return ""
+
+  const splitedAmount = amount.split(".")
+
+  if (splitedAmount.length === 1) return amount
+
+  return `${splitedAmount[0]}.${splitedAmount[1].slice(0, 3)}`
+}
+
 export const renderStatusIcon = (status: string, classes: Record<"statusPillIcon", string>): JSX.Element => {
   switch (status) {
     case "pending":