From af2b2b4c6ee53c1b7694fc57704279178004e58f Mon Sep 17 00:00:00 2001
From: elocin <elocinnat99@gmail.com>
Date: Thu, 10 Oct 2024 20:47:43 +0800
Subject: [PATCH] fix(ui-ux): fix NaN bug in homepage (#1939)

* return 0% if divided by 0

* remove added ,

* remove console

* lint

* refine CalculatePercentage

---------

Co-authored-by: canonbrother <w.canonbrother@gmail.com>
---
 src/components/commons/searchbar/SearchBar.tsx | 15 +++++++--------
 src/utils/index/CalculatePercentage.ts         |  9 +++++++--
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/commons/searchbar/SearchBar.tsx b/src/components/commons/searchbar/SearchBar.tsx
index e1b1255e4..e2814681c 100644
--- a/src/components/commons/searchbar/SearchBar.tsx
+++ b/src/components/commons/searchbar/SearchBar.tsx
@@ -68,11 +68,10 @@ export function SearchBar(props: SearchBarInterface): JSX.Element {
     const currentReference = refs.reference.current as Element;
     Object.assign(refs.floating.current?.style, {
       width: `${currentReference.scrollWidth}px`,
-      left:
-        `${
-          currentReference.scrollLeft +
-          (currentReference.scrollWidth - refs.floating.current?.scrollWidth)
-        }px` ?? "",
+      left: `${
+        currentReference.scrollLeft +
+        (currentReference.scrollWidth - refs.floating.current?.scrollWidth)
+      }px`,
     });
   }
 
@@ -113,7 +112,7 @@ export function SearchBar(props: SearchBarInterface): JSX.Element {
 
   const onChangeDebounceHandler = useMemo(
     () => debounce(changeHandler, 200),
-    []
+    [],
   );
 
   function onSelect(result: SearchResult): void {
@@ -137,7 +136,7 @@ export function SearchBar(props: SearchBarInterface): JSX.Element {
       >
         <div
           className={classNames(
-            "flex w-full p-2 rounded-3xl h-10 bg-white dark:bg-gray-800 dark:border-gray-700 border focus-within:border-primary-200"
+            "flex w-full p-2 rounded-3xl h-10 bg-white dark:bg-gray-800 dark:border-gray-700 border focus-within:border-primary-200",
           )}
           data-testid="SearchBar"
           ref={reference}
@@ -184,7 +183,7 @@ export function SearchBar(props: SearchBarInterface): JSX.Element {
 async function getSearchResults(
   api: WhaleApiClient,
   network: NetworkName,
-  query: string
+  query: string,
 ): Promise<SearchResult[]> {
   const searchResults: SearchResult[] = [];
 
diff --git a/src/utils/index/CalculatePercentage.ts b/src/utils/index/CalculatePercentage.ts
index d5fe12c35..bf37861da 100644
--- a/src/utils/index/CalculatePercentage.ts
+++ b/src/utils/index/CalculatePercentage.ts
@@ -1,10 +1,15 @@
 export function CalculatePercentage(
   value1: number | undefined,
-  value2: number | undefined
+  value2: number | undefined,
 ): string {
   if (value1 === undefined || value2 === undefined) {
     return "";
   }
 
-  return `${((value1 / value2) * 100).toFixed(2)}%`;
+  const result = value1 / value2;
+  if (isNaN(result)) {
+    return "0.00%";
+  }
+
+  return `${(result * 100).toFixed(2)}%`;
 }