feat(explorer): use proper layout for no results found

kadena-community · Dec 19, 2024 · f3421ca · f3421ca
1 parent aec35fe
commit f3421ca
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 22 deletions.
diff --git a/packages/apps/explorer/src/components/Search/NoSearchResults/NoSearchResults.tsx b/packages/apps/explorer/src/components/Search/NoSearchResults/NoSearchResults.tsx
@@ -1,45 +1,35 @@
-import { Heading, Stack } from '@kadena/kode-ui';
+import { Heading, Text } from '@kadena/kode-ui';
 import type { FC } from 'react';
 import React from 'react';
 
-interface NoSearchResultsProps {
+interface INoSearchResultsProps {
   type?: 'requestKey' | 'accountName' | 'blockhash';
   value?: string;
 }
 
-export const NoSearchResults: FC<NoSearchResultsProps> = ({ type, value }) => {
+export const NoSearchResults: FC<INoSearchResultsProps> = ({ type, value }) => {
   // TODO: add buttons to navigate to other networks testnet/mainnet
   // Use url from router to query other networks to see if the search result is
   // there
 
   switch (true) {
     case type === 'requestKey' && value !== undefined:
       return (
-        <Stack justifyContent="center" width="100%">
-          <Heading as="h3">No search results for request key: {value}</Heading>
-        </Stack>
+        <Heading as="h3">No search results for request key: {value}</Heading>
       );
 
     case type === 'accountName' && value !== undefined:
       return (
-        <Stack justifyContent="center" flexDirection={'column'} width="100%">
+        <>
           <Heading as="h3">No search results for account: {value}</Heading>
-          <Heading as="h4">Please check the account name and try again</Heading>
-        </Stack>
+          <Text>Please check the network and account name and try again</Text>
+        </>
       );
 
     case type === 'blockhash' && value !== undefined:
-      return (
-        <Stack justifyContent="center" width="100%">
-          <Heading as="h3">No search results for block: {value}</Heading>
-        </Stack>
-      );
+      return <Heading as="h3">No search results for block: {value}</Heading>;
 
     default:
-      return (
-        <Stack justifyContent="center" width="100%">
-          <Heading as="h3">No search results</Heading>
-        </Stack>
-      );
+      return <Heading as="h3">No search results</Heading>;
   }
 };
diff --git a/packages/apps/explorer/src/pages/[networkSlug]/event/[eventname].tsx b/packages/apps/explorer/src/pages/[networkSlug]/event/[eventname].tsx
@@ -30,7 +30,9 @@ const Height: React.FC = () => {
               key={`chain${chainData.chainId}`}
             >
               {chainData.data.edges.length === 0 ? (
-                <NoSearchResults />
+                <LayoutBody>
+                  <NoSearchResults />
+                </LayoutBody>
               ) : (
                 <CompactTable
                   isLoading={isLoading}

diff --git a/packages/apps/explorer/src/pages/[networkSlug]/transaction/[requestKey].tsx b/packages/apps/explorer/src/pages/[networkSlug]/transaction/[requestKey].tsx
@@ -70,7 +70,7 @@ const Transaction: React.FC = () => {
   }, [loading, data, error, setIsLoading]);
 
   return (
-    <Layout>
+    <Layout layout='full'>
       {innerData && innerData.transaction ? (
         <>
           <LayoutHeader>
@@ -120,7 +120,12 @@ const Transaction: React.FC = () => {
         </>
       ) : (
         !Array.isArray(router.query.requestKey) && (
-          <NoSearchResults type="requestKey" value={router.query.requestKey} />
+          <LayoutBody>
+            <NoSearchResults
+              type="requestKey"
+              value={router.query.requestKey}
+            />
+          </LayoutBody>
         )
       )}
     </Layout>