fix(explorer): fix links (#2348)

kadena-community · Jul 1, 2024 · a50c3c1 · a50c3c1
1 parent 0077f9b
commit a50c3c1
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 47 deletions.
diff --git a/.changeset/hot-apes-scream.md b/.changeset/hot-apes-scream.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/apps/explorer/src/components/footer/footer.tsx b/packages/apps/explorer/src/components/footer/footer.tsx
@@ -5,6 +5,7 @@ import {
   MonoLogoX,
 } from '@kadena/react-icons/system';
 import { Heading, Stack, Text } from '@kadena/react-ui';
+import Link from 'next/link';
 import type { FC } from 'react';
 import React from 'react';
 import { Media } from '../layout/media';
@@ -29,7 +30,9 @@ const Footer: FC = () => {
       <Media greaterThanOrEqual="md">
         <Stack width="100%" flexDirection={{ xs: 'column', sm: 'row' }}>
           <Stack flex={1} flexDirection="column" gap="lg" marginInlineEnd="lg">
-            <Logo />
+            <Link href="/">
+              <Logo />
+            </Link>
             <Text>
               Kadena is a high-performance blockchain platform enabling
               scalable, secure, and efficient smart contracts.

diff --git a/packages/apps/explorer/src/components/header/header.tsx b/packages/apps/explorer/src/components/header/header.tsx
@@ -1,5 +1,6 @@
 import { Stack } from '@kadena/react-ui';
 import classNames from 'classnames';
+import { usePathname } from 'next/navigation';
 import type { FC } from 'react';
 import React, { useState } from 'react';
 import { useInView } from 'react-intersection-observer';
@@ -11,8 +12,11 @@ import StatisticsStack from '../statistics-component/statistics-stack/statistics
 import { fixedClass, fixedVisibleClass, headerClass } from './styles.css';
 
 const Header: FC = () => {
+  const location = usePathname();
+  const isSearchPage = location === '/';
   const { ref, inView } = useInView({
     rootMargin: '20px',
+    skip: !isSearchPage,
   });
   const [menuIsOpen, setMenuIsOpen] = useState(false);
 
@@ -25,33 +29,41 @@ const Header: FC = () => {
       <Sidemenu isOpen={menuIsOpen} />
 
       <Stack as="header" className={layoutWrapperClass}>
+        {isSearchPage && (
+          <Stack
+            data-isSearchPage={isSearchPage}
+            className={classNames(
+              headerClass,
+              fixedClass,
+              !inView && isSearchPage ? fixedVisibleClass : undefined,
+            )}
+            alignItems={'center'}
+            width="100%"
+            gap="md"
+          >
+            <NavBar
+              isFixed
+              isSearchPage={isSearchPage}
+              handleToggleMenu={handleToggleMenu}
+              menuIsOpen={menuIsOpen}
+            >
+              <SearchBarHeader />
+            </NavBar>
+          </Stack>
+        )}
         <Stack
-          className={classNames(
-            headerClass,
-            fixedClass,
-            !inView && fixedVisibleClass,
-          )}
+          ref={ref}
+          className={classNames(headerClass, !isSearchPage && fixedClass)}
           alignItems={'center'}
           width="100%"
           gap="md"
         >
           <NavBar
-            isFixed
             handleToggleMenu={handleToggleMenu}
             menuIsOpen={menuIsOpen}
+            isSearchPage={isSearchPage}
           >
-            <SearchBarHeader />
-          </NavBar>
-        </Stack>
-        <Stack
-          ref={ref}
-          className={headerClass}
-          alignItems={'center'}
-          width="100%"
-          gap="md"
-        >
-          <NavBar handleToggleMenu={handleToggleMenu} menuIsOpen={menuIsOpen}>
-            <StatisticsStack />
+            {isSearchPage || inView ? <StatisticsStack /> : <SearchBarHeader />}
           </NavBar>
         </Stack>
       </Stack>

diff --git a/packages/apps/explorer/src/components/header/styles.css.ts b/packages/apps/explorer/src/components/header/styles.css.ts
@@ -22,6 +22,11 @@ export const fixedClass = style({
   transition: 'transform .5s ease',
   transform: 'translateY(-100%)',
   maxWidth: $$pageWidth,
+  selectors: {
+    '&:not([data-isSearchPage="true"])': {
+      transform: 'translateY(0%)',
+    },
+  },
 });
 
 export const fixedVisibleClass = style({

diff --git a/packages/apps/explorer/src/components/layout/layout.tsx b/packages/apps/explorer/src/components/layout/layout.tsx
@@ -1,5 +1,6 @@
 import Footer from '@/components/footer/footer';
 import Header from '@/components/header/header';
+import { Stack } from '@kadena/react-ui';
 import type { FC, ReactNode } from 'react';
 import React from 'react';
 import { documentStyle, layoutWrapperClass } from './styles.css';
@@ -12,7 +13,10 @@ export const Layout: FC<IProps> = ({ children }: IProps) => {
   return (
     <div className={documentStyle}>
       <Header />
-      <main className={layoutWrapperClass}>{children}</main>
+      <Stack marginBlock="xl" />
+      <Stack as="main" flexDirection="column" className={layoutWrapperClass}>
+        {children}
+      </Stack>
       <Footer />
     </div>
   );

diff --git a/packages/apps/explorer/src/components/navbar/navbar.tsx b/packages/apps/explorer/src/components/navbar/navbar.tsx
@@ -1,6 +1,6 @@
-import { SpireKeyKdacolorLogoWhite } from '@kadena/react-icons/product';
 import { MonoMenu, MonoMenuOpen } from '@kadena/react-icons/system';
 import { Button, Stack } from '@kadena/react-ui';
+import Link from 'next/link';
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
 import { GraphQLQueryDialog } from '../graphql-query-dialog/graphql-query-dialog';
@@ -14,25 +14,32 @@ import { buttonSizeClass } from './styles.css';
 export const NavBar: FC<
   PropsWithChildren<{
     isFixed?: boolean;
+    isSearchPage?: boolean;
     handleToggleMenu: () => void;
     menuIsOpen?: boolean;
   }>
-> = ({ children, isFixed, handleToggleMenu, menuIsOpen }) => {
+> = ({ children, isFixed, isSearchPage, handleToggleMenu, menuIsOpen }) => {
   return (
     <>
       <Stack alignItems="center">
-        {isFixed ? (
+        {isFixed || !isSearchPage ? (
           <>
             <Media greaterThanOrEqual="md">
-              <Logo />
+              <Link href="/">
+                <Logo />
+              </Link>
             </Media>
             <Media lessThan="md">
-              <MobileLogo />
+              <Link href="/">
+                <MobileLogo />
+              </Link>
             </Media>
           </>
         ) : (
           <Media lessThan="md">
-            <Logo />
+            <Link href="/">
+              <Logo />
+            </Link>
           </Media>
         )}
 
@@ -46,12 +53,6 @@ export const NavBar: FC<
         <Stack>
           <ThemeToggle />
           <GraphQLQueryDialog />
-
-          <Button
-            className={buttonSizeClass}
-            variant="primary"
-            startVisual={<SpireKeyKdacolorLogoWhite />}
-          />
         </Stack>
       </Media>
       <Media lessThan="md">

diff --git a/packages/apps/explorer/src/components/sidemenu/sidemenu.tsx b/packages/apps/explorer/src/components/sidemenu/sidemenu.tsx
@@ -1,11 +1,9 @@
 import { menuConfig } from '@/utils/menuConfig';
-import { SpireKeyKdacolorLogoWhite } from '@kadena/react-icons/product';
-import { Button, Heading, Stack, TextLink } from '@kadena/react-ui';
+import { Heading, Stack, TextLink } from '@kadena/react-ui';
 import classNames from 'classnames';
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
 import { GraphQLQueryDialog } from '../graphql-query-dialog/graphql-query-dialog';
-import { buttonSizeClass } from '../navbar/styles.css';
 import { listClass, menuClass, menuOpenClass } from './styles.css';
 
 interface IProps {
@@ -23,12 +21,6 @@ const Sidemenu: FC<PropsWithChildren<IProps>> = ({ isOpen }) => {
       <Stack paddingBlock="xxxl" />
       <Stack width="100%" justifyContent="flex-end" paddingInlineEnd="sm">
         <GraphQLQueryDialog />
-
-        <Button
-          className={buttonSizeClass}
-          variant="primary"
-          startVisual={<SpireKeyKdacolorLogoWhite />}
-        />
       </Stack>
 
       <ul className={listClass}>

diff --git a/packages/apps/explorer/src/hooks/search/index.ts b/packages/apps/explorer/src/hooks/search/index.ts
@@ -77,7 +77,9 @@ export const useSearch = () => {
 
     if (!searchQuery) {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      router.replace(`${location}`);
+      if (location === '/') {
+        router.replace(`${location}`);
+      }
       return;
     }
 

diff --git a/packages/apps/explorer/src/pages/account/[accountName].tsx b/packages/apps/explorer/src/pages/account/[accountName].tsx
@@ -10,6 +10,7 @@ import { useQueryContext } from '@/context/query-context';
 import { account } from '@/graphql/queries/account.graph';
 import { accountNameTextClass } from '@/styles/account.css';
 import { Heading, Stack, TabItem, Tabs, Text } from '@kadena/react-ui';
+import { useSearchParams } from 'next/navigation';
 import { useRouter } from 'next/router';
 import type { FC, Key } from 'react';
 import React, { useEffect, useMemo, useState } from 'react';
@@ -22,24 +23,25 @@ export interface IKeyProps {
 
 const Account: FC = () => {
   const router = useRouter();
+  const params = useSearchParams();
   const [selectedTab, setSelectedTab] = useState<string>('Transactions');
-
+  const accountName = params.get('accountName');
   const { setQueries } = useQueryContext();
 
   const accountQueryVariables = {
-    accountName: router.query.accountName as string,
+    accountName: accountName ?? '',
   };
 
   const { loading, data, error } = useAccountQuery({
     variables: accountQueryVariables,
-    skip: !router.query.accountName,
+    skip: !accountName,
   });
 
   useEffect(() => {
-    if (router.query.accountName) {
+    if (accountName) {
       setQueries([{ query: account, variables: accountQueryVariables }]);
     }
-  }, [router.query.accountName]);
+  }, [accountName]);
 
   useEffect(() => {
     const hash = router.asPath.split('#')[1];