Merge pull request #363 from pshenmic/feat/back-button

Update back button
pshenmic · Dec 26, 2024 · 01c7a73 · 01c7a73
2 parents 8b83311 + fe1ed7d
commit 01c7a73
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 12 deletions.
diff --git a/packages/frontend/src/app/dataContract/[identifier]/DataContract.js b/packages/frontend/src/app/dataContract/[identifier]/DataContract.js
@@ -86,7 +86,7 @@ function DataContract ({ identifier }) {
       urlParameters.set('tab', tabs[activeTab])
     }
 
-    router.push(`${pathname}?${urlParameters.toString()}`, { scroll: false })
+    router.replace(`${pathname}?${urlParameters.toString()}`, { scroll: false })
   }, [activeTab])
 
   const handlePageClick = ({ selected }) => {

diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js
@@ -116,13 +116,12 @@ function Identity ({ identifier }) {
       urlParameters.set('tab', tabs[activeTab])
     }
 
-    router.push(`${pathname}?${urlParameters.toString()}`, { scroll: false })
+    router.replace(`${pathname}?${urlParameters.toString()}`, { scroll: false })
   }, [activeTab, router, pathname])
 
   return (
     <PageDataContainer
       className={'IdentityPage'}
-      backLink={'/identities'}
       title={'Identity info'}
     >
       <IdentityTotalCard identity={identity} rate={rate}/>

diff --git a/packages/frontend/src/app/transaction/[hash]/TransactionPage.js b/packages/frontend/src/app/transaction/[hash]/TransactionPage.js
@@ -64,7 +64,6 @@ function Transaction ({ hash }) {
   return (
     <PageDataContainer
       className={'TransactionPage'}
-      backLink={'/transactions'}
       title={'Transaction Info'}
     >
       {transaction.error && <ErrorMessageBlock h={'450px'}/>}

diff --git a/packages/frontend/src/app/validator/[hash]/Validator.js b/packages/frontend/src/app/validator/[hash]/Validator.js
@@ -108,7 +108,6 @@ function Validator ({ hash }) {
   return (
     <PageDataContainer
       className={'ValidatorPage'}
-      backLink={'/validators'}
       title={'Validator Info'}
     >
       <div className={'ValidatorPage__ContentContainer'}>

diff --git a/packages/frontend/src/components/ui/Buttons/BackButton.js b/packages/frontend/src/components/ui/Buttons/BackButton.js
@@ -0,0 +1,11 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+
+function BackButton ({ link, children, ...props }) {
+  const router = useRouter()
+
+  return <button onClick={() => router.back()} {...props}>{children}</button>
+}
+
+export default BackButton
diff --git a/packages/frontend/src/components/ui/Buttons/index.js b/packages/frontend/src/components/ui/Buttons/index.js
@@ -1,5 +1,7 @@
 import CopyButton from './CopyButton'
+import BackButton from './BackButton'
 
 export {
-  CopyButton
+  CopyButton,
+  BackButton
 }
diff --git a/packages/frontend/src/components/ui/containers/PageDataContainer.js b/packages/frontend/src/components/ui/containers/PageDataContainer.js
@@ -1,9 +1,9 @@
 import { Container } from '@chakra-ui/react'
-import Link from 'next/link'
 import { ChevronIcon2 } from '../icons'
+import BackButton from '../Buttons/BackButton'
 import './PageDataContainer.scss'
 
-function PageDataContainer ({ className, title, backLink, children }) {
+function PageDataContainer ({ className, title, children }) {
   return (
     <Container
       className={`PageDataContainer ${className || ''}`}
@@ -14,10 +14,9 @@ function PageDataContainer ({ className, title, backLink, children }) {
     >
       <Container maxW={'container.maxPageW'} px={[0]} py={0}>
         <div className={'PageDataContainer__Header'}>
-          {backLink &&
-            <Link href={backLink} className={'PageDataContainer__BackLink'}>
-              <ChevronIcon2 w={'8px'} h={'8px'} transform={'rotate(180deg)'} color='brand.normal'/>
-            </Link>}
+          <BackButton className={'PageDataContainer__BackLink'}>
+            <ChevronIcon2 w={'8px'} h={'8px'} color={'brand.normal'}/>
+          </BackButton>
           {title && <div className={'PageDataContainer__Title'}>{title}</div>}
         </div>
 

diff --git a/packages/frontend/src/components/ui/containers/PageDataContainer.scss b/packages/frontend/src/components/ui/containers/PageDataContainer.scss
@@ -50,6 +50,10 @@ $borderRadius: 20px;
     justify-content: center;
     transition: all .1s;
 
+    svg {
+      transform: rotate(180deg);
+    }
+
     @media (hover: hover) and (pointer: fine) {
       &:hover {
         background-color: rgba(24, 167, 255, .2);