Merge pull request #249 from MobulaFi/dev

fix: crash on symbol undefined & clearing empty data

Author: NBMSacha

src/features/data/chains/components/box-left/index.tsx

@@ -1,6 +1,7 @@
-import { Spinner } from "components/spinner";
 import dynamic from "next/dynamic";
 import React from "react";
+import { BsDatabaseX } from "react-icons/bs";
+import { SmallFont } from "../../../../../components/fonts";
 import { useChains } from "../../context-manager";
 import { getChainName } from "../../utils";
 import { BoxTitle } from "../box-title";
@@ -12,9 +13,13 @@ const EChart = dynamic(() => import("../../../../../lib/echart/line"), {
 export const LeftBox = () => {
   const { chain, pairs } = useChains();
   const chainName = getChainName(pairs?.[0]?.pair?.blockchain);
+  const isValidData =
+    chain?.volume_history?.length &&
+    chain?.volume_history?.[chain?.volume_history?.length - 1 || 0]?.[1];
+
   const titleInfo = {
     value: chain?.volume_history?.[chain?.volume_history?.length - 1]?.[1],
-    dollar: true,
+    dollar: isValidData ? true : false,
     percentage: chain?.volume_change_24h,
     title: `${chainName} DeFi Volume`,
   };
@@ -25,7 +30,7 @@ export const LeftBox = () => {
         min-w-[407px] md:min-w-full w-[31.5%] mr-2.5 lg:w-full transition duration-500 md:overflow-visible py-2.5"
     >
       <BoxTitle data={titleInfo} />
-      {chain?.volume_history?.length > 0 ? (
+      {isValidData > 0 ? (
         <div className="w-[95%] mx-auto h-[210px] lg:h-[190px] -mt-[40px]">
           <EChart
             data={chain?.volume_history || []}
@@ -36,8 +41,9 @@ export const LeftBox = () => {
           />
         </div>
       ) : (
-        <div className="h-[200px] w-full flex items-center justify-center">
-          <Spinner extraCss="w-[30px] h-[30px]" />
+        <div className="h-[200px] w-full flex items-center flex-col justify-center">
+          <BsDatabaseX className="text-light-font-100 dark:text-dark-font-100 text-2xl mb-2.5" />
+          <SmallFont>No data available</SmallFont>
         </div>
       )}
     </div>

src/features/data/chains/components/box-middle/index.tsx

@@ -1,6 +1,7 @@
-import { Spinner } from "components/spinner";
 import dynamic from "next/dynamic";
 import React from "react";
+import { BsDatabaseX } from "react-icons/bs";
+import { SmallFont } from "../../../../../components/fonts";
 import { useChains } from "../../context-manager";
 import { getChainName } from "../../utils";
 import { BoxTitle } from "../box-title";
@@ -18,14 +19,18 @@ export const MiddleBox = () => {
     percentage: chain?.tokens_change_total,
     title: `${chainName} Active Tokens`,
   };
+  const isValidData =
+    chain?.tokens_history?.length &&
+    chain?.tokens_history?.[chain?.tokens_history?.length - 1 || 0]?.[1];
+
   return (
     <div
       className={`flex flex-col h-[200px] lg:h-[175px] rounded-xl bg-light-bg-secondary dark:bg-dark-bg-secondary border
       border-light-border-primary dark:border-dark-border-primary py-2.5 relative  
       min-w-[407px] md:min-w-full w-[31.5%] lg:w-full transition duration-500 mx-2.5 md:mx-0`}
     >
       <BoxTitle data={titleInfo} />
-      {chain?.tokens_history?.length > 0 ? (
+      {isValidData ? (
         <div className="w-[95%] mx-auto h-[210px] -mt-[40px]">
           <EChart
             data={chain?.tokens_history || []}
@@ -37,8 +42,9 @@ export const MiddleBox = () => {
           />
         </div>
       ) : (
-        <div className="h-[200px] w-full flex items-center justify-center">
-          <Spinner extraCss="w-[30px] h-[30px]" />
+        <div className="h-[200px] w-full flex items-center flex-col justify-center">
+          <BsDatabaseX className="text-light-font-100 dark:text-dark-font-100 text-2xl mb-2.5" />
+          <SmallFont>No data available</SmallFont>
         </div>
       )}
     </div>

src/features/data/chains/components/box-right/index.tsx

@@ -1,4 +1,5 @@
 import dynamic from "next/dynamic";
+import React from "react";
 import { BsDatabaseX } from "react-icons/bs";
 import { SmallFont } from "../../../../../components/fonts";
 import { useChains } from "../../context-manager";
@@ -29,7 +30,9 @@ export const RightBox = () => {
     >
       <BoxTitle data={titleInfo} />
       {chain?.liquidity_history?.length > 0 &&
-      chain?.liquidity_history?.[0]?.[1] > 0 ? (
+      chain?.liquidity_history?.[
+        chain?.liquidity_history?.length - 1 || 0
+      ]?.[1] > 0 ? (
         <div className="w-[95%] mx-auto h-[210px] -mt-[40px]">
           <EChart
             data={chain?.liquidity_history || []}

src/features/user/portfolio/components/category/activity/index.tsx

@@ -158,7 +158,10 @@ export const Activity = ({
   // ETH is ETH vs Stable
   // Other is Other vs Stable or ETH
   const ethSymbols = useMemo(
-    () => Object.values(blockchainsIdContent).map((entry) => entry.eth.symbol),
+    () =>
+      Object.values(blockchainsIdContent)
+        .filter((entry) => entry.eth)
+        .map((entry) => entry.eth?.symbol),
     []
   );