fix: handle failed requests response to prevent pages crash

CoreumFoundation · Jan 22, 2024 · a38d36c · a38d36c
1 parent 11ad395
commit a38d36c
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 53 deletions.
diff --git a/apps/web-coreum/package.json b/apps/web-coreum/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web-coreum",
-  "version": "2.19.3-84",
+  "version": "2.19.3-85",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {

diff --git a/packages/ui/src/screens/asset_details/hooks.ts b/packages/ui/src/screens/asset_details/hooks.ts
@@ -61,30 +61,26 @@ const formatAsset = ({
   additionalData: any;
 }) => {
   let holders = '0';
-  let tokenType = '';
+  const tokenType = 'native';
 
-  const assetInTotalSupply = additionalData.supply.coins.find(
+  const assetInTotalSupply = additionalData?.supply?.coins?.find(
     (coin: any) => coin.denom === asset.denom
   );
 
-  const exponent = metadata.denom_units[1]?.exponent ?? 0;
-  const descriptionValue = asset.description.length ? asset.description : metadata.description;
-  let display = metadata.display ?? '';
-  const symbol = metadata.symbol ?? '';
+  const exponent = metadata?.denom_units?.[1]?.exponent ?? 0;
+  const descriptionValue = asset.description.length ? asset.description : metadata?.description;
+  let display = metadata?.display ?? '';
+  const symbol = metadata?.symbol ?? '';
   const supply = assetInTotalSupply?.amount ?? '0';
 
   if (asset.denom === primaryTokenUnit) {
-    const { count } = additionalData.accountAggregate.aggregate;
-    holders = count;
-    tokenType = 'native';
+    holders = additionalData?.accountAggregate?.aggregate?.count ?? 0;
     display = tokenUnits[primaryTokenUnit]?.display;
   } else {
-    const assetInHolders = additionalData.tokenHolderCount.find(
+    const assetInHolders = additionalData?.tokenHolderCount.find(
       (tokenHolderCount: any) => tokenHolderCount.denom === asset.denom
     );
     holders = String(assetInHolders?.holders) ?? '0';
-
-    tokenType = asset.denom.includes('ibc') ? 'ibc' : 'native';
   }
 
   return {
@@ -211,30 +207,24 @@ export const useAssetDetails = () => {
   });
 
   useEffect(() => {
-    const { assetsListItem } = state;
-    if (!assetsListItem && !state.assetsLoading && !state.metadataLoading && !state.loading) {
+    const { assetsListItem, assetsLoading, metadataLoading, loading, data, metadata } = state;
+
+    if (!assetsListItem && !assetsLoading && !metadataLoading && !loading) {
       handleSetState((prevState) => ({
         ...prevState,
         exists: false,
       }));
-    } else if (!state.assetsLoading && !state.metadataLoading && !state.loading) {
+    } else if (!assetsLoading && !metadataLoading && !loading && assetsListItem) {
       handleSetState((prevState) => ({
         ...prevState,
         asset: formatAsset({
-          metadata: state.metadata,
-          asset: assetsListItem!,
-          additionalData: state.data,
+          metadata,
+          asset: assetsListItem,
+          additionalData: data,
         }),
       }));
     }
-  }, [
-    state.assetsLoading,
-    state.metadataLoading,
-    state.loading,
-    state.data,
-    state.assetsListItem,
-    state.metadata,
-  ]);
+  }, [state]);
 
   return {
     state,

diff --git a/packages/ui/src/screens/asset_ibc_details/hooks.ts b/packages/ui/src/screens/asset_ibc_details/hooks.ts
@@ -51,15 +51,15 @@ interface AssetDetailsState {
 }
 
 const formatAsset = ({ asset, additionalData }: { asset: Asset; additionalData: any }) => {
-  const assetInTotalSupply = additionalData.supply.coins.find(
+  const assetInTotalSupply = additionalData?.supply?.coins?.find(
     (coin: any) => coin.denom === asset.denom
   );
 
   const exponent = asset.ibc_info.precision ?? 0;
   const descriptionValue = asset.description;
   const display = asset.ibc_info.display_name ?? '';
   const supply = assetInTotalSupply?.amount ?? '0';
-  const assetInHolders = additionalData.tokenHolderCount.find(
+  const assetInHolders = additionalData?.tokenHolderCount?.find(
     (tokenHolderCount: any) => tokenHolderCount.denom === asset.denom
   );
   const holders = String(assetInHolders?.holders) ?? '0';
@@ -166,23 +166,23 @@ export const useAssetDetails = () => {
   });
 
   useEffect(() => {
-    const { assetsListItem } = state;
+    const { assetsListItem, assetsLoading, loading, data } = state;
 
-    if (!assetsListItem && !state.assetsLoading && !state.loading) {
+    if (!assetsListItem && !assetsLoading && !loading) {
       handleSetState((prevState) => ({
         ...prevState,
         exists: false,
       }));
-    } else if (!state.assetsLoading && !state.loading) {
+    } else if (!assetsLoading && !loading && assetsListItem) {
       handleSetState((prevState) => ({
         ...prevState,
         asset: formatAsset({
-          asset: assetsListItem!,
-          additionalData: state.data,
+          asset: assetsListItem,
+          additionalData: data,
         }),
       }));
     }
-  }, [state.assetsLoading, state.loading, state.data, state.assetsListItem]);
+  }, [state]);
 
   return {
     state,

diff --git a/packages/ui/src/screens/assets/hooks.ts b/packages/ui/src/screens/assets/hooks.ts
@@ -69,29 +69,27 @@ const formatAssets = ({
     let chain = 'Coreum';
 
     const assetInMetadata = metadatas.find((metadataItem: any) => metadataItem.base === item.denom);
-    const assetInTotalSupply = additionalData.supply.coins.find(
+    const assetInTotalSupply = additionalData?.supply?.coins?.find(
       (coin: any) => coin.denom === item.denom
     );
 
     let exponent = assetInMetadata?.denom_units[1]?.exponent ?? 0;
     const descriptionValue = item.description.length
       ? item.description
-      : assetInMetadata.description;
+      : assetInMetadata?.description;
     let display = assetInMetadata?.display ?? '';
     const symbol = assetInMetadata?.symbol ?? '';
     const supply = assetInTotalSupply?.amount ?? '0';
 
     if (item.denom === primaryTokenUnit) {
-      const { count } = additionalData.accountAggregate.aggregate;
-      holders = count;
+      holders = additionalData?.accountAggregate?.aggregate?.count ?? 0;
       tokenType = 'native';
       display = tokenUnits[primaryTokenUnit]?.display;
     } else {
-      const assetInHolders = additionalData.tokenHolderCount.find(
+      const assetInHolders = additionalData?.tokenHolderCount?.find(
         (tokenHolderCount: any) => tokenHolderCount.denom === item.denom
       );
       holders = String(assetInHolders?.holders) ?? '0';
-
       tokenType = item.denom.includes('ibc/') ? 'ibc' : 'native';
     }
 
@@ -292,24 +290,19 @@ export const useAssets = () => {
   });
 
   useEffect(() => {
-    if (!state.assetsLoading && !state.metadataLoading && !state.loading) {
+    const { assetsLoading, metadataLoading, loading, data, assetsList, metadatas } = state;
+
+    if (!assetsLoading && !metadataLoading && !loading) {
       handleSetState((prevState) => ({
         ...prevState,
         items: formatAssets({
-          metadatas: state.metadatas,
-          assets: state.assetsList,
-          additionalData: state.data,
+          metadatas,
+          assets: assetsList,
+          additionalData: data,
         }),
       }));
     }
-  }, [
-    state.assetsLoading,
-    state.metadataLoading,
-    state.loading,
-    state.data,
-    state.assetsList,
-    state.metadatas,
-  ]);
+  }, [state]);
 
   return {
     state,