Merge pull request #676 from alleslabs/fix/refactor-error-fetching

feat: new error fetching image & refactor empty states

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#676](https://github.com/alleslabs/celatone-frontend/pull/676) New error fetching image & refactor empty states
 - [#666](https://github.com/alleslabs/celatone-frontend/pull/666) Add my published modules page
 - [#671](https://github.com/alleslabs/celatone-frontend/pull/671) Add mahalo-1
 - [#652](https://github.com/alleslabs/celatone-frontend/pull/652) Add amp publish module and deploy script

src/config/theme/default.ts

@@ -112,7 +112,8 @@ export const DEFAULT_THEME: ThemeConfig = {
   },
   jsonTheme: "monokai",
   illustration: {
-    error: "https://assets.alleslabs.dev/illustration/404.svg",
+    "404": "https://assets.alleslabs.dev/illustration/404.svg",
+    error: "https://assets.alleslabs.dev/illustration/error.svg",
     searchNotFound:
       "https://assets.alleslabs.dev/illustration/search-not-found.svg",
     searchEmpty: "https://assets.alleslabs.dev/illustration/search-empty.svg",

src/config/theme/initia.ts

@@ -123,8 +123,10 @@ export const INITIA_THEME: ThemeConfig = {
   },
   jsonTheme: "monokai",
   illustration: {
-    error:
+    "404":
       "https://assets.alleslabs.dev/integrations/initia/illustration/404.svg",
+    error:
+      "https://assets.alleslabs.dev/integrations/initia/illustration/error.svg",
     searchNotFound:
       "https://assets.alleslabs.dev/integrations/initia/illustration/search-not-found.svg",
     searchEmpty:

src/config/theme/osmosis.ts

@@ -114,8 +114,10 @@ export const OSMOSIS_THEME: ThemeConfig = {
   },
   jsonTheme: "pastel_on_dark",
   illustration: {
-    error:
+    "404":
       "https://assets.alleslabs.dev/integrations/osmosis/illustration/404.svg",
+    error:
+      "https://assets.alleslabs.dev/integrations/osmosis/illustration/error.svg",
     searchNotFound:
       "https://assets.alleslabs.dev/integrations/osmosis/illustration/search-not-found.svg",
     searchEmpty:

src/config/theme/sei.ts

@@ -129,7 +129,9 @@ export const SEI_THEME: ThemeConfig = {
   },
   jsonTheme: "one_dark",
   illustration: {
-    error: "https://assets.alleslabs.dev/integrations/sei/illustration/404.svg",
+    "404": "https://assets.alleslabs.dev/integrations/sei/illustration/404.svg",
+    error:
+      "https://assets.alleslabs.dev/integrations/sei/illustration/error.svg",
     searchNotFound:
       "https://assets.alleslabs.dev/integrations/sei/illustration/search-not-found.svg",
     searchEmpty:

src/config/theme/types.ts

@@ -125,6 +125,7 @@ export type ThemeConfig = {
     stepper: string;
   };
   illustration: {
+    "404": string;
     error: string;
     searchNotFound: string;
     searchEmpty: string;

src/lib/components/state/ErrorFetching.tsx

@@ -1,36 +1,17 @@
-import { Flex, Text } from "@chakra-ui/react";
-
-import { CustomIcon } from "lib/components/icon";
+import { EmptyState } from "./EmptyState";
 
 interface ErrorFetchingProps {
-  message: string;
+  dataName: string;
+  withBorder?: boolean;
 }
 
-// TODO: call EmptyState here instead with a format message
-export const ErrorFetching = ({ message }: ErrorFetchingProps) => (
-  <Flex
-    alignItems="center"
-    flexDir="column"
-    gap={4}
-    width="full"
-    borderY="1px solid"
-    py={8}
-    my={12}
-    borderColor="gray.700"
-  >
-    <CustomIcon
-      name="alert-circle-solid"
-      color="gray.600"
-      boxSize={20}
-      mr={3}
-    />
-    <Text
-      color="text.dark"
-      textAlign="center"
-      whiteSpace="pre-wrap"
-      variant="body1"
-    >
-      {message} Please try again later.
-    </Text>
-  </Flex>
+export const ErrorFetching = ({
+  dataName,
+  withBorder = false,
+}: ErrorFetchingProps) => (
+  <EmptyState
+    imageVariant="error"
+    message={`There is an error during fetching ${dataName}. Please try again later.`}
+    withBorder={withBorder}
+  />
 );

src/lib/components/state/InvalidState.tsx

@@ -1,10 +1,9 @@
-import { Flex, Heading, Text } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import { trackInvalidState } from "lib/amplitude";
 
-import { StateImage } from "./StateImage";
+import { EmptyState } from "./EmptyState";
 
 interface InvalidStateProps {
   title: string;
@@ -18,23 +17,13 @@ export const InvalidState = ({ title }: InvalidStateProps) => {
   }, [router.isReady, title]);
 
   return (
-    <Flex
-      direction="column"
-      alignItems="center"
-      borderY="1px solid"
-      borderColor="gray.700"
-      width="full"
-      my={6}
-      py={6}
-    >
-      <StateImage imageVariant="not-found" />
-      <Heading as="h5" variant="h5" my={2}>
-        {title}
-      </Heading>
-      <Text variant="body2" color="text.dark" textAlign="center">
-        Please double-check your input and make sure you have selected the
-        correct network.
-      </Text>
-    </Flex>
+    <EmptyState
+      heading={title}
+      message="Please double-check your input and make sure you have selected the
+    correct network."
+      imageVariant="not-found"
+      textVariant="body2"
+      withBorder
+    />
   );
 };

src/lib/components/state/StateImage.tsx

@@ -3,9 +3,10 @@ import { Image } from "@chakra-ui/react";
 
 import { CURR_THEME } from "env";
 
-export type ImageVariant = "not-found" | "empty" | "disconnected";
+export type ImageVariant = "error" | "not-found" | "empty" | "disconnected";
 
 const imageSourceMap: Record<ImageVariant, string> = {
+  error: CURR_THEME.illustration.error,
   "not-found": CURR_THEME.illustration.searchNotFound,
   empty: CURR_THEME.illustration.searchEmpty,
   disconnected: CURR_THEME.illustration.disconnected,

src/lib/pages/account-details/components/asset/AssetSectionContent.tsx

@@ -13,10 +13,7 @@ export const AssetSectionContent = ({
   supportedAssets,
   error,
 }: AssetSectionContentProps) => {
-  if (error)
-    return (
-      <ErrorFetching message="There is an error during fetching balances." />
-    );
+  if (error) return <ErrorFetching dataName="balances" />;
 
   return supportedAssets.length ? (
     <Grid

src/lib/pages/account-details/components/delegations/index.tsx

@@ -45,13 +45,9 @@ export const DelegationsSection = ({
   }, [onClose, router.query.accountAddress]);
 
   if (isLoading) return <Loading />;
-  if (!stakingParams)
-    return (
-      <ErrorFetching message="There is an error during fetching delegation data" />
-    );
+  if (!stakingParams) return <ErrorFetching dataName="delegation data" />;
 
   const redelegationCount = redelegations?.length ?? 0;
-
   return (
     <Flex
       mt={{ base: 4, md: 8 }}

src/lib/pages/account-details/components/modules/ModuleListsBody.tsx

@@ -45,10 +45,7 @@ export const ModuleListsBody = ({
   };
 
   if (isLoading) return <Loading />;
-  if (!modules)
-    return (
-      <ErrorFetching message="There is an error during fetching modules." />
-    );
+  if (!modules) return <ErrorFetching dataName="modules" />;
   if (!filteredModules?.length)
     return (
       <EmptyState

src/lib/pages/account-details/components/resources/ResourceOverviewBody.tsx

@@ -43,10 +43,7 @@ export const ResourceOverviewBody = ({
   );
 
   if (isLoading) return <Loading />;
-  if (!resourcesByName)
-    return (
-      <ErrorFetching message="There is an error during fetching resources." />
-    );
+  if (!resourcesByName) return <ErrorFetching dataName="resources" />;
   if (!resourcesByName.length)
     return (
       <EmptyState

src/lib/pages/account-details/components/resources/ResourceSectionBody.tsx

@@ -42,13 +42,9 @@ export const ResourceSectionBody = ({
   }, [resourcesByOwner, selectedResource]);
 
   if (isLoading) return <Loading />;
-  if (!resourcesByOwner)
-    return (
-      <ErrorFetching message="There is an error during fetching resources." />
-    );
+  if (!resourcesByOwner) return <ErrorFetching dataName="resources" />;
   if (!resourcesByOwner.length)
     return <EmptyState imageVariant="empty" message="No resources found" />;
-
   return (
     <>
       <ResourceLeftPanel

src/lib/pages/account-details/components/tables/AdminContractsTable.tsx

@@ -94,7 +94,7 @@ export const AdminContractsTable = observer(
               isLoading={isLoading}
               emptyState={
                 !contracts ? (
-                  <ErrorFetching message="There is an error during fetching contracts." />
+                  <ErrorFetching dataName="contracts" />
                 ) : (
                   <EmptyState
                     message="This account does not have any admin access for any contracts."

src/lib/pages/account-details/components/tables/InstantiatedContractsTable.tsx

@@ -94,7 +94,7 @@ export const InstantiatedContractsTable = observer(
               isLoading={isLoading}
               emptyState={
                 !contracts ? (
-                  <ErrorFetching message="There is an error during fetching contracts." />
+                  <ErrorFetching dataName="contracts" />
                 ) : (
                   <EmptyState
                     message="This account did not instantiate any contracts before."

src/lib/pages/account-details/components/tables/OpenedProposalsTable.tsx

@@ -86,7 +86,7 @@ export const OpenedProposalsTable = ({
             isLoading={isLoading}
             emptyState={
               !proposals ? (
-                <ErrorFetching message="There is an error during fetching proposals." />
+                <ErrorFetching dataName="proposals" />
               ) : (
                 <EmptyState
                   message="This account did not open any proposals before."

src/lib/pages/account-details/components/tables/StoredCodesTable.tsx

@@ -94,7 +94,7 @@ export const StoredCodesTable = observer(
               isLoading={isLoading}
               emptyState={
                 !codes ? (
-                  <ErrorFetching message="There is an error during fetching codes." />
+                  <ErrorFetching dataName="codes" />
                 ) : (
                   <EmptyState
                     withBorder

src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx

@@ -32,10 +32,7 @@ const DelegationsTableBody = ({
   const isMobile = useMobile();
 
   if (isLoading) return <Loading />;
-  if (!delegations || !rewards)
-    return (
-      <ErrorFetching message="There is an error during fetching delegations." />
-    );
+  if (!delegations || !rewards) return <ErrorFetching dataName="delegations" />;
   if (!delegations.length)
     return (
       <EmptyState

src/lib/pages/account-details/components/tables/bonded/UnbondingsTable.tsx

@@ -30,10 +30,7 @@ const UnbondingsTableBody = ({
   const isMobile = useMobile();
 
   if (isLoading) return <Loading />;
-  if (!unbondings)
-    return (
-      <ErrorFetching message="There is an error during fetching undelegations." />
-    );
+  if (!unbondings) return <ErrorFetching dataName="undelegations" />;
   if (!unbondings.length)
     return (
       <EmptyState

src/lib/pages/account-details/components/tables/txs/index.tsx

@@ -150,7 +150,7 @@ export const TxsTable = ({
           isLoading={isLoading || isTxCountLoading}
           emptyState={
             !transactions ? (
-              <ErrorFetching message="There is an error during fetching transactions." />
+              <ErrorFetching dataName="transactions" />
             ) : (
               <EmptyState withBorder {...getEmptyStateProps(selectedFilters)} />
             )

src/lib/pages/blocks/components/BlocksTable.tsx

@@ -40,11 +40,7 @@ export const BlocksTable = ({ isViewMore }: BlocksTableProps) => {
   });
 
   if (isLoading) return <Loading />;
-  if (error)
-    return (
-      <ErrorFetching message="There is an error during fetching recent blocks." />
-    );
-
+  if (error) return <ErrorFetching dataName="blocks" />;
   if (!data?.total)
     return (
       <EmptyState

src/lib/pages/contract-details/components/contract-balances/index.tsx

@@ -21,10 +21,7 @@ export const ContractBalances = ({
   const { supportedAssets, unsupportedAssets, isLoading, totalData, error } =
     useBalanceInfos(contractAddress);
 
-  if (error)
-    return (
-      <ErrorFetching message="There is an error during fetching balances." />
-    );
+  if (error) return <ErrorFetching dataName="balances" />;
 
   return (
     <Flex

src/lib/pages/contract-details/components/tables/TxsTable.tsx

@@ -51,7 +51,7 @@ export const TxsTable = ({
         isLoading={isLoading}
         emptyState={
           error ? (
-            <ErrorFetching message="There is an error during fetching transactions." />
+            <ErrorFetching dataName="transactions" />
           ) : (
             <EmptyState
               withBorder

src/lib/pages/module-details/components/tables/ModuleTxsTable.tsx

@@ -74,7 +74,7 @@ export const ModuleTxsTable = ({
         isLoading={isLoading}
         emptyState={
           error ? (
-            <ErrorFetching message="There is an error during fetching transactions." />
+            <ErrorFetching dataName="transactions" />
           ) : (
             <EmptyState
               withBorder

src/lib/pages/module-details/components/tables/history/index.tsx

@@ -78,7 +78,7 @@ export const ModuleHistoryTable = ({
         isLoading={isLoading}
         emptyState={
           !moduleId || error ? (
-            <ErrorFetching message="There is an error fetching module published events history." />
+            <ErrorFetching dataName="module published events history" />
           ) : (
             <EmptyState
               imageVariant="empty"

src/lib/pages/modules/components/RecentModulesTable.tsx

@@ -31,7 +31,7 @@ export const RecentModulesTable = () => {
         isLoading={isLoading}
         emptyState={
           error ? (
-            <ErrorFetching message="There is an error during fetching recent modules." />
+            <ErrorFetching dataName="recent modules" />
           ) : (
             <EmptyState
               withBorder

src/lib/pages/my-published-modules/components/MyPublishedModulesTable.tsx

@@ -43,25 +43,24 @@ export const MyPublishedModulesTable = () => {
   }, [keyword, mappedModules]);
 
   const emptyState = () => {
-    if (error)
-      return (
-        <ErrorFetching message="There is an error during fetching recent modules." />
-      );
+    if (error) return <ErrorFetching dataName="published modules" />;
     if (!keyword)
       return (
         <EmptyState
           imageVariant="empty"
           message="There is currently no published modules."
+          withBorder
         />
       );
     return (
       <EmptyState
-        withBorder
         imageVariant="not-found"
         message="No matching module found. Make sure you are searching with Module Name."
+        withBorder
       />
     );
   };
+
   return (
     <>
       <InputWithIcon