feat: redesing result page and notFound page

.vscode/launch.json

@@ -10,7 +10,7 @@
             "name": "Next.js: chrome debug client-side",
             "type": "chrome",
             "request": "launch",
-            "url": "http://localhost:3001"
+            "url": "http://localhost:3000"
         }
     ]
 }

components/common/Navbar/DesktopNavbar.tsx

@@ -54,6 +54,7 @@ function DesktopNavbar(props: DeviceProps) {
                       showSubMenu={showSubMenu === link.id}
                       title={link.title}
                       subMenu={link.subMenu}
+                      theme={theme}
                     />
                   )}
                 </li>

components/common/Navbar/Menu.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { MenuProps } from './Navbar.type';
 
 function Menu(props: MenuProps) {
-  const { subMenu, showSubMenu, title } = props;
+  const { subMenu, showSubMenu, title, theme } = props;
   return (
     <div className="relative">
       <div className="cursor-pointer flex items-center">
@@ -24,10 +24,15 @@ function Menu(props: MenuProps) {
       </div>
 
       {showSubMenu && (
-        <ul className="bg-neutral-500 p-4 rounded-md absolute right-0 top-8">
+        <ul
+          className={`${
+            theme === 'dark' ? 'bg-surfacesBackground' : 'bg-neutral-500'
+          }  p-4 rounded-md absolute right-0 top-8`}>
           {subMenu.map((item, index) => (
             <li
-              className={`text-18 text-baseForeground min-w-[9.625rem] whitespace-nowrap ${
+              className={`text-18 ${
+                theme === 'dark' ? 'text-primary-500' : 'text-baseForeground'
+              } min-w-[9.625rem] whitespace-nowrap ${
                 index !== 0 ? 'pt-6' : ''
               }`}
               key={index}>

components/common/Navbar/Navbar.type.ts

@@ -31,6 +31,7 @@ export interface MenuProps {
   subMenu: SubMenuTypes[];
   showSubMenu: boolean;
   title: string;
+  theme: 'dark' | 'light';
 }
 
 export interface MobileMenuProps {

components/common/Navbar/index.tsx

@@ -8,7 +8,10 @@ function Navbar(props: NavbarProps) {
   const { theme } = props;
 
   return (
-    <header className="flex w-full bg-baseBackground items-center justify-center">
+    <header
+      className={`flex w-full ${
+        theme === 'dark' ? 'bg-transparent' : 'bg-baseBackground'
+      } items-center justify-center`}>
       <div
         className={
           'container flex w-full  items-center justify-center px-6  text-baseForeground xl:px-0'

components/home/ChartBox/Chart.tsx

@@ -18,7 +18,7 @@ export const Chart = (props: ChartProps) => {
 
   // Update the date property of each item in prevWeek with the corresponding item from deepCopyCurrentWeek
   prevWeek.forEach((item, index) => {
-    prevWeek[index].date = currentWeek[index].date;
+    prevWeek[index].date = currentWeek[index]?.date;
   });
 
   return (

components/search/NotFound/NotFound.type.ts

@@ -0,0 +1,3 @@
+export interface PropsType {
+  query: string;
+}

components/search/NotFound/index.tsx

@@ -0,0 +1,28 @@
+import NotFoundImage from 'public/img/notFound.svg';
+import Image from 'next/image';
+import { PropsType } from './NotFound.type';
+import Link from 'next/link';
+
+function NotFound(props: PropsType) {
+  const { query } = props;
+  return (
+    <div className="w-full py-[120px] flex flex-col items-center">
+      <Image src={NotFoundImage} height={318} alt="Not Found" />
+      <div className="text-45 pt-[100px] text-primary-500 font-semibold">
+        Oops! We couldn't find what you are looking for
+      </div>
+      <div className="text-20 text-neutral-800 pt-10">
+        {`The search string you entered was: ${query || ''}`}
+      </div>
+      <div className="text-20 text-neutral-800">
+        This is an invalid search string.
+      </div>
+      <Link
+        href="/"
+        className="text-baseForeground bg-primary-600 py-15 px-20 mt-50 text-center rounded-full w-[224px] text-18 font-medium">
+        Back To Home
+      </Link>
+    </div>
+  );
+}
+export default NotFound;

components/search/Result/Result.type.ts

@@ -0,0 +1,5 @@
+import { SwapType } from 'types';
+
+export interface PropsType {
+  data: SwapType[];
+}

components/search/Result/index.tsx

@@ -0,0 +1,25 @@
+import Table from 'components/common/Table';
+import { PropsType } from './Result.type';
+
+function Result(props: PropsType) {
+  const { data } = props;
+  return (
+    <div className="container mt-[3.125rem] rounded-normal bg-baseForeground p-35">
+      <div className="flex flex-col">
+        <div className="flex flex-col justify-center">
+          <h2 className="text-28 font-semibold text-primary-500">
+            Search Results
+          </h2>
+          <p className="text-16 text-neutral-800">
+            {`Found ${data.length} Rango swaps for this wallet address`}
+          </p>
+        </div>
+        <div className="mt-25">
+          <Table data={data} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Result;

constant/index.ts

@@ -1,14 +1,14 @@
 export const MATCH_TYPE = {
   ADDRESS: 'ADDRESS',
-  REQUESTID: 'REQUESTID'
-}
+  REQUESTID: 'REQUESTID',
+};
 
 export const STATUS: any = {
   success: 'success',
   failed: 'failed',
   running: 'running',
   unknown: 'Pending',
-  null: 'Pending'
-}
+  null: 'Pending',
+};
 
-export const API_URL = process.env.NEXT_PUBLIC_BASE_URL
+export const API_URL = process.env.NEXT_PUBLIC_BASE_URL;

pages/404.tsx

@@ -1,32 +1,38 @@
-import NotFoundAnything from 'components/notFound/NotFoundAnything';
-import type { NextPage } from 'next';
-import { useRouter } from 'next/router';
-import copy from 'public/img/copy.svg';
-import { CopyText } from 'utils/copyText';
+import Navbar from 'components/common/Navbar';
 import Image from 'next/image';
-import Layout from 'components/common/Layout';
+import Link from 'next/link';
+import notFound404 from 'public/img/404.svg';
+import notFoundImage from 'public/img/notFound.png';
 
-const NotFound: NextPage = () => {
-  const router = useRouter();
-  const { query }: { query?: string } = router.query;
+function NotFoundPage() {
   return (
-    <Layout title="404-Not Found">
-      {query != null && (
-        <div className="flex items-center text-base font-bold mb-3 lg:mb-6 lg:text-28">
-          search results: <span className="font-normal ml-1">{query}</span>
-          <button
-            onClick={(e) => {
-              e.stopPropagation();
-              CopyText(query);
-            }}
-            className="group relative cursor-pointer">
-            <Image src={copy} alt="copy_to_clipboard" />
-          </button>
+    <div className="h-full w-full bg-body-mask bg-cover">
+      <Navbar theme="dark" />
+      <main className="w-full flex justify-center">
+        <div className="container flex flex-col mt-[100px] items-center">
+          <div className="w-full relative">
+            <div className="w-full pt-1/4 opacity-75">
+              <Image src={notFound404} className="mx-auto	w-1/2" alt="404" />
+            </div>
+            <div className="w-full flex justify-center absolute top-1/4">
+              <Image className="w-1/4" src={notFoundImage} alt="Not Found!" />
+            </div>
+          </div>
+          <div className="text-45 pt-[100px] text-primary-500 font-semibold">
+            Page Not Found{' '}
+          </div>
+          <div className="text-20 text-neutral-800">
+            There is no page with this URL!
+          </div>
+          <Link
+            href="/"
+            className="text-baseForeground bg-primary-600 py-15 px-20 mt-50 text-center rounded-full w-[224px] text-18 font-medium">
+            Back To Home
+          </Link>
         </div>
-      )}
-      <NotFoundAnything />
-    </Layout>
+      </main>
+    </div>
   );
-};
+}
 
-export default NotFound;
+export default NotFoundPage;

pages/index.tsx

@@ -9,7 +9,7 @@ import Image from 'next/image';
 import Layout from 'components/common/Layout';
 import SearchBox from 'components/common/SearchBox';
 import Summary from 'components/home/Summary';
-import Table from 'components/home/Table';
+import Table from 'components/common/Table';
 
 interface PropsType {
   swaps: SwapType[];
@@ -53,7 +53,7 @@ function Home(props: PropsType) {
             </div>
           </div>
         </div>
-        <div className="bg-neutral-300 pt-[14.68rem] flex justify-center">
+        <div className=" pt-[14.68rem] flex justify-center">
           <div className="container mt-[3.125rem] rounded-normal bg-baseForeground p-35">
             <div className="flex flex-col">
               <div className="flex justify-between mb-25 items-start">

pages/search.tsx

@@ -1,21 +1,20 @@
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
-import { GetServerSideProps, NextPage } from 'next';
+import { GetServerSideProps } from 'next';
 import { useRouter } from 'next/router';
 import { getSearchResult, getWalletSwaps } from '../services';
 import { MATCH_TYPE } from '../constant';
 import useSWR from 'swr';
 import Error from 'next/error';
-import Image from 'next/image';
-import CopyIcon from 'public/img/copy.svg';
 import Layout from 'components/common/Layout';
-import Table from 'components/home/Table';
-import { CopyText } from 'utils/copyText';
 import Loading from 'components/common/Loading';
-import NotFoundAnything from 'components/notFound/NotFoundAnything';
+import SearchBox from 'components/common/SearchBox';
+import Result from 'components/search/Result';
+import NotFound from 'components/search/NotFound';
 interface PropsType {
   status?: number;
 }
-const Home: NextPage<PropsType> = ({ status }: PropsType) => {
+function Search(props: PropsType) {
+  const { status } = props;
   const router = useRouter();
   const { query } = router.query;
   const { data } = useSWR(query, getWalletSwaps);
@@ -24,38 +23,37 @@ const Home: NextPage<PropsType> = ({ status }: PropsType) => {
     <Error statusCode={data?.status || status} />
   ) : (
     <Layout title={`Address ${query as string}`}>
-      <div className="flex items-center text-base text-black truncate font-bold mb-3 lg:text-28 lg:mb-6">
-        search results: <span className="font-normal ml-1">{query}</span>
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            CopyText(query as string);
-          }}
-          className="group relative cursor-pointer">
-          <Image src={CopyIcon} alt="copy_to_clipboard" />
-        </button>
-      </div>
-
-      {!data ? (
-        <div className="mt-10">
-          <Loading />
+      <div>
+        <div className="w-full flex flex-col items-center relative bg-baseBackground">
+          <SearchBox />
+        </div>
+        <div className="w-full bg-neutral-300 flex justify-center">
+          {data && (
+            <>
+              {data.transactions && data.transactions.length ? (
+                <Result data={data.transactions} />
+              ) : (
+                <NotFound query={query as string} />
+              )}
+            </>
+          )}
+          {!data && (
+            <div className="flex items-center justify-center mt-60">
+              <Loading />
+            </div>
+          )}
         </div>
-      ) : !data.transactions.length ? (
-        <NotFoundAnything />
-      ) : (
-        <Table data={data.transactions} />
-      )}
+      </div>
     </Layout>
   );
-};
+}
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
   const query = context.query.query;
 
   const result = await getSearchResult(query as string);
   if (result?.error) return { props: { status: result.status } };
-  if (!result.length) return { notFound: true };
-  if (result[0].matchType === MATCH_TYPE.REQUESTID) {
+  if (result?.length && result[0].matchType === MATCH_TYPE.REQUESTID) {
     return {
       redirect: {
         permanent: false,
@@ -67,4 +65,4 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
     props: {},
   };
 };
-export default Home;
+export default Search;

pages/swap/[id]/index.tsx

@@ -1,4 +1,4 @@
-import { GetServerSideProps, NextPage } from 'next';
+import { GetServerSideProps } from 'next';
 import { useRouter } from 'next/router';
 import Error from 'next/error';
 import Link from 'next/link';
@@ -14,7 +14,8 @@ interface PropsType {
   status: number;
 }
 
-const SwapDetails: NextPage<PropsType> = ({ details, status }: PropsType) => {
+function SwapDetails(props: PropsType) {
+  const { details, status } = props;
   const router = useRouter();
   const id = router.query.id as string;
 
@@ -43,7 +44,7 @@ const SwapDetails: NextPage<PropsType> = ({ details, status }: PropsType) => {
       </div>
     </Layout>
   );
-};
+}
 
 export const getServerSideProps: GetServerSideProps<PropsType> = async ({
   query,