ENG-3797 ENG-3736 fix(portal): lists and claims back button and hook

apps/portal/app/consts/paths.ts

@@ -19,6 +19,7 @@ export const PATHS = {
   PROFILE_LISTS: '/app/profile/lists',
   // Explore
   EXPLORE_IDENTITIES: '/app/explore/identities',
+  EXPLORE_CLAIMS: '/app/explore/claims',
   EXPLORE_LISTS: '/app/explore/lists',
   // Activity
   GLOBAL_ACTIVITY: '/app/activity/global',

apps/portal/app/lib/hooks/useGoBack.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react'
+
+import { useLocation, useNavigate } from '@remix-run/react'
+
+function useGoBack({ fallbackRoute }: { fallbackRoute: string }) {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const hasNavigated = useRef(false)
+
+  useEffect(() => {
+    hasNavigated.current = true
+  }, [location])
+
+  return () => {
+    if (hasNavigated.current && window.history.length > 2) {
+      navigate(-1)
+    } else {
+      window.location.href = fallbackRoute
+    }
+  }
+}
+
+export { useGoBack }

apps/portal/app/routes/app+/claim+/$id.tsx

@@ -24,6 +24,7 @@ import {
 import { ErrorPage } from '@components/error-page'
 import NavigationButton from '@components/navigation-link'
 import StakeModal from '@components/stake/stake-modal'
+import { useGoBack } from '@lib/hooks/useGoBack'
 import { useLiveLoader } from '@lib/hooks/useLiveLoader'
 import { getClaimOrPending } from '@lib/services/claims'
 import { stakeModalAtom } from '@lib/state/store'
@@ -147,9 +148,16 @@ export default function ClaimDetails() {
       ? 'FOR'
       : 'AGAINST'
 
+  const handleGoBack = useGoBack({ fallbackRoute: PATHS.EXPLORE_CLAIMS })
+
   const leftPanel = (
     <div className="flex-col justify-start items-start gap-6 inline-flex w-full">
-      <NavigationButton variant="secondary" size="icon" to={'..'}>
+      <NavigationButton
+        variant="secondary"
+        size="icon"
+        to="#"
+        onClick={handleGoBack}
+      >
         <Icon name="arrow-left" />
       </NavigationButton>
       <div className="flex-row flex m-auto md:hidden">

apps/portal/app/routes/app+/list+/$id.tsx

@@ -10,6 +10,7 @@ import AddIdentitiesListModal from '@components/list/add-identities-list-modal'
 import { ListIdentityDisplayCard } from '@components/list/list-identity-display-card'
 import NavigationButton from '@components/navigation-link'
 import ImageModal from '@components/profile/image-modal'
+import { useGoBack } from '@lib/hooks/useGoBack'
 import { useLiveLoader } from '@lib/hooks/useLiveLoader'
 import { addIdentitiesListModalAtom, imageModalAtom } from '@lib/state/store'
 import logger from '@lib/utils/logger'
@@ -78,10 +79,16 @@ export default function ListDetails() {
     useAtom(addIdentitiesListModalAtom)
   const [imageModalActive, setImageModalActive] = useAtom(imageModalAtom)
   const navigate = useNavigate()
+  const handleGoBack = useGoBack({ fallbackRoute: PATHS.EXPLORE_LISTS })
 
   const leftPanel = (
     <div className="flex-col justify-start items-start gap-6 inline-flex max-lg:w-full">
-      <NavigationButton variant="secondary" size="icon" to={'..'}>
+      <NavigationButton
+        variant="secondary"
+        size="icon"
+        to="#"
+        onClick={handleGoBack}
+      >
         <Icon name="arrow-left" />
       </NavigationButton>
       <ProfileCard