From f3421caeaa82bf39fa8d45009105ff02c2315473 Mon Sep 17 00:00:00 2001
From: Albert G <516972+alber70g@users.noreply.github.com>
Date: Thu, 19 Dec 2024 14:38:05 +0100
Subject: [PATCH] feat(explorer): use proper layout for no results found

---
 .../NoSearchResults/NoSearchResults.tsx       | 28 ++++++-------------
 .../pages/[networkSlug]/event/[eventname].tsx |  4 ++-
 .../transaction/[requestKey].tsx              |  9 ++++--
 3 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/packages/apps/explorer/src/components/Search/NoSearchResults/NoSearchResults.tsx b/packages/apps/explorer/src/components/Search/NoSearchResults/NoSearchResults.tsx
index cb18b3f75a..7fc0b77e0f 100644
--- a/packages/apps/explorer/src/components/Search/NoSearchResults/NoSearchResults.tsx
+++ b/packages/apps/explorer/src/components/Search/NoSearchResults/NoSearchResults.tsx
@@ -1,13 +1,13 @@
-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
@@ -15,31 +15,21 @@ export const NoSearchResults: FC<NoSearchResultsProps> = ({ type, value }) => {
   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
index 2c9f0f68e5..6fa5426c78 100644
--- 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
index 2ff8f2ec6b..65a54ac929 100644
--- 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>