Merge branch 'main' of https://github.com/layerswap/layerswap-explorer

layerswap · Sep 6, 2024 · 35ae9a3 · 35ae9a3
2 parents 80a9655 + a893a54
commit 35ae9a3
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 15 deletions.
diff --git a/app/[searchParam]/SearchData.tsx b/app/[searchParam]/SearchData.tsx
@@ -87,7 +87,6 @@ export default function SearchData({ searchParam }: { searchParam: string }) {
                                             Destination
                                         </th>
                                         <th scope="col" className="sticky top-0 px-4 py-3.5 text-left text-sm font-semibold text-white rounded-tr-lg">
-
                                         </th>
                                     </tr>
                                 </thead>
@@ -109,7 +108,7 @@ export default function SearchData({ searchParam }: { searchParam: string }) {
                                             return
 
                                         return (
-                                            <tr key={index} onClick={(e) => router.push(`/${encodeURIComponent(String(inputTransaction?.transaction_hash))}`)} className="hover:bg-secondary-600 hover:cursor-pointer">
+                                            <tr key={index} onClick={() => router.push(`/${encodeURIComponent(String(input_transaction?.transaction_hash))}`)} className="hover:bg-secondary-600 hover:cursor-pointer">
                                                 <td className="whitespace-nowrap py-2 px-3 text-sm font-medium text-white flex flex-col">
                                                     <Link href={`/${inputTransaction?.transaction_hash}`} onClick={(e) => e.stopPropagation()} className="hover:text-gray-300 inline-flex items-center w-fit">
                                                         {shortenAddress(inputTransaction?.transaction_hash)}

diff --git a/app/page.tsx b/app/page.tsx
@@ -8,9 +8,11 @@ export default async function Home() {
     return <MaintananceContent />
 
   return (
-    <main className="w-full py-5 px-6 xl:px-0 h-full flex flex-col flex-1">
+    <main className="w-full pb-5 px-6 xl:px-0 h-full flex flex-col">
+      <div className="mx-auto w-full px-6 lg:px-8 flex flex-col">
         <Search />
-        <DataTable />
+      </div>
+      <DataTable />
     </main>
   )
 }
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -61,7 +61,7 @@ const Footer = () => {
     }
 
     return (
-        <footer className="overflow-hidden py-6 md:grid grid-cols-3 w-full px-6 lg:px-8 mt-auto">
+        <footer className="overflow-hidden py-6 md:grid grid-cols-3 w-full px-6 lg:px-8 mt-auto relative z-20">
             <div className="flex justify-center space-x-6 order-3 place-self-end">
                 {footerNavigation.social.map((item) => (
                     <Link target="_blank" key={item.name} href={item.href} className="text-gray-400 hover:text-gray-500">

diff --git a/components/Header.tsx b/components/Header.tsx
@@ -20,16 +20,16 @@ export default function Header() {
                     </div>
                 </div>
             }
-            <nav className={`mx-auto max-w-6xl py-6 px-6 lg:px-8 flex flex-col ${pathname !== '/' ? 'grid-rows-2' : 'grid-rows-1'}`} aria-label="Global">
+            <nav className={`mx-auto max-w-6xl pt-6 px-6 lg:px-8 flex flex-col ${pathname !== '/' ? 'grid-rows-2' : 'grid-rows-1'}`} aria-label="Global">
                 <div className='flex justify-between'>
                     <Link href="/" className="-m-1.5 p-1.5">
                         <LayerswapExplorerLogo className="h-14 w-auto text-primary-logoColor" />
                     </Link>
                     <div className="flex">
-                        <Link target='_blank' href={'https://www.layerswap.io/app'} className='px-2 sm:px-3 py-1 sm:py-2 hover:border-white/50 flex items-center gap-1 text-white text-sm sm:text-base duration-200 transition-colors'>
+                        <Link target='_blank' href={'https://www.layerswap.io/app'} className='px-2 sm:px-3 py-1 sm:py-2 hover:opacity-70 flex items-center gap-1 text-white text-sm sm:text-base transition-all duartion-200'>
                             <span>App</span>
                         </Link>
-                        <Link target='_blank' href={'https://docs.layerswap.io'} className='px-2 sm:px-3 py-1 sm:py-2 hover:border-white/50 flex items-center gap-1 text-white text-sm sm:text-base duration-200 transition-colors'>
+                        <Link target='_blank' href={'https://docs.layerswap.io'} className='px-2 sm:px-3 py-1 sm:py-2 hover:opacity-70 flex items-center gap-1 text-white text-sm sm:text-base transition-all duartion-200'>
                             <span>Docs</span>
                         </Link>
                     </div>

diff --git a/components/Search.tsx b/components/Search.tsx
@@ -1,13 +1,19 @@
 "use client"
 
 import { SearchIcon, XCircle } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
 
 const Search = () => {
-    const [searchParam, setSearchParam] = useState('');
+    const params = useParams()
+
+    const [searchParam, setSearchParam] = useState(params.searchParam || '');
     const router = useRouter();
 
+    useEffect(() => {
+        setSearchParam(params.searchParam || '');
+    }, [params.searchParam]);
+
     const handleKeyDown = (event: any) => {
         if (event.key === 'Enter') {
             handleSearch()
@@ -29,7 +35,7 @@ const Search = () => {
     }
 
     return (
-        <div className="w-full mt-5 flex items-center">
+        <div className="w-full mt-5 flex items-center ">
             <div className="relative w-full pl-2 bg-secondary-700 p-1.5 rounded-md">
                 <input
                     type="text"
@@ -47,8 +53,9 @@ const Search = () => {
             </div>
             <div className="p-2">
                 <button
+                    disabled={!searchParam}
                     onClick={handleSearch}
-                    className="rounded-lg bg-primary-500 shadow-lg p-2 hover:bg-primary-700 hover:text-primary-text active:scale-90 duration-200 transition-all font-sans text-xs text-white"
+                    className="disabled:bg-primary-text-muted disabled:hover:text-white rounded-lg bg-primary-500 shadow-lg p-2 hover:bg-primary-700 hover:text-primary-text active:scale-90 duration-200 transition-all font-sans text-xs text-white"
                 >
                     <SearchIcon className="h-5 w-5" />
                 </button>

diff --git a/components/notFound.tsx b/components/notFound.tsx
@@ -6,11 +6,11 @@ export default function NotFound() {
         <section className="fixed inset-0 flex items-center justify-center">
             <NotFoundBackground className="absolute"/>
             <div className="flex flex-col items-center justify-center text-center p-4 relative z-20">
-                <h1 className="text-2xl font-semibold text-white md:text-4xl">We couldn&#39;t find any logs</h1>
+                <h1 className="text-2xl font-semibold text-white md:text-4xl">We couldn&apos;t find anything</h1>
                 <p className="text-base text-primary-text-placeholder mt-2">Please make sure you entered a valid address/source Tx/destination TX.</p>
                 <span className="text-base text-primary-text-placeholder block">If the issue persists, you can contact our support.</span>
                 <div className="flex items-center mt-6 gap-x-3">
-                    <Link href={'/'} className="w-full px-5 py-2 text-sm tracking-wide text-primary-text transition-colors duration-200 bg-secondary-600 rounded-lg shrink-0 sm:w-auto hover:bg-secondary-700/80">
+                    <Link href="/" className="w-full px-5 py-2 text-sm tracking-wide text-primary-text transition-colors duration-200 bg-secondary-600 rounded-lg shrink-0 sm:w-auto hover:bg-secondary-700/80">
                         Clear search
                     </Link>
                 </div>