fix links in claim

0xIntuition · Nov 12, 2024 · 07bd8db · 07bd8db
1 parent 17ca47c
commit 07bd8db
Show file tree

Hide file tree

Showing 13 changed files with 254 additions and 115 deletions.
diff --git a/apps/portal/app/components/list/activity.tsx b/apps/portal/app/components/list/activity.tsx
@@ -24,6 +24,7 @@ import {
   SortColumn,
 } from '@0xintuition/api'
 
+import RemixLink from '@components/remix-link'
 import { stakeModalAtom } from '@lib/state/store'
 import {
   formatBalance,
@@ -32,6 +33,7 @@ import {
   getAtomIpfsLink,
   getAtomLabel,
   getAtomLink,
+  getClaimUrl,
 } from '@lib/utils/misc'
 import { Link } from '@remix-run/react'
 import { BLOCK_EXPLORER_URL, PATHS } from 'app/consts'
@@ -271,66 +273,76 @@ function ActivityItem({
             }
             className="w-full hover:bg-transparent"
           >
-            <Claim
-              size="md"
-              subject={{
-                variant: activity.claim.subject?.is_user
-                  ? Identity.user
-                  : Identity.nonUser,
-                label: getAtomLabel(
-                  activity.claim.subject as IdentityPresenter,
-                ),
-                imgSrc: getAtomImage(
-                  activity.claim.subject as IdentityPresenter,
-                ),
-                id: activity.claim.subject?.identity_id,
-                description: getAtomDescription(
-                  activity.claim.subject as IdentityPresenter,
-                ),
-                ipfsLink: getAtomIpfsLink(
-                  activity.claim.subject as IdentityPresenter,
-                ),
-                link: getAtomLink(activity.claim.subject as IdentityPresenter),
-              }}
-              predicate={{
-                variant: activity.claim.predicate?.is_user
-                  ? Identity.user
-                  : Identity.nonUser,
-                label: getAtomLabel(
-                  activity.claim.predicate as IdentityPresenter,
-                ),
-                imgSrc: getAtomImage(
-                  activity.claim.predicate as IdentityPresenter,
-                ),
-                id: activity.claim.predicate?.identity_id,
-                description: getAtomDescription(
-                  activity.claim.predicate as IdentityPresenter,
-                ),
-                ipfsLink: getAtomIpfsLink(
-                  activity.claim.predicate as IdentityPresenter,
-                ),
-                link: getAtomLink(
-                  activity.claim.predicate as IdentityPresenter,
-                ),
-              }}
-              object={{
-                variant: activity.claim.object?.is_user
-                  ? Identity.user
-                  : Identity.nonUser,
-                label: getAtomLabel(activity.claim.object as IdentityPresenter),
-                imgSrc: getAtomImage(
-                  activity.claim.object as IdentityPresenter,
-                ),
-                id: activity.claim.object?.identity_id,
-                description: getAtomDescription(
-                  activity.claim.object as IdentityPresenter,
-                ),
-                ipfsLink: getAtomIpfsLink(
-                  activity.claim.object as IdentityPresenter,
-                ),
-                link: getAtomLink(activity.claim.object as IdentityPresenter),
-              }}
-            />
+            <Link to={getClaimUrl(activity.claim.vault_id)} prefetch="intent">
+              <Claim
+                size="md"
+                subject={{
+                  variant: activity.claim.subject?.is_user
+                    ? Identity.user
+                    : Identity.nonUser,
+                  label: getAtomLabel(
+                    activity.claim.subject as IdentityPresenter,
+                  ),
+                  imgSrc: getAtomImage(
+                    activity.claim.subject as IdentityPresenter,
+                  ),
+                  id: activity.claim.subject?.identity_id,
+                  description: getAtomDescription(
+                    activity.claim.subject as IdentityPresenter,
+                  ),
+                  ipfsLink: getAtomIpfsLink(
+                    activity.claim.subject as IdentityPresenter,
+                  ),
+                  link: getAtomLink(
+                    activity.claim.subject as IdentityPresenter,
+                  ),
+                  linkComponent: RemixLink,
+                }}
+                predicate={{
+                  variant: activity.claim.predicate?.is_user
+                    ? Identity.user
+                    : Identity.nonUser,
+                  label: getAtomLabel(
+                    activity.claim.predicate as IdentityPresenter,
+                  ),
+                  imgSrc: getAtomImage(
+                    activity.claim.predicate as IdentityPresenter,
+                  ),
+                  id: activity.claim.predicate?.identity_id,
+                  description: getAtomDescription(
+                    activity.claim.predicate as IdentityPresenter,
+                  ),
+                  ipfsLink: getAtomIpfsLink(
+                    activity.claim.predicate as IdentityPresenter,
+                  ),
+                  link: getAtomLink(
+                    activity.claim.predicate as IdentityPresenter,
+                  ),
+                  linkComponent: RemixLink,
+                }}
+                object={{
+                  variant: activity.claim.object?.is_user
+                    ? Identity.user
+                    : Identity.nonUser,
+                  label: getAtomLabel(
+                    activity.claim.object as IdentityPresenter,
+                  ),
+                  imgSrc: getAtomImage(
+                    activity.claim.object as IdentityPresenter,
+                  ),
+                  id: activity.claim.object?.identity_id,
+                  description: getAtomDescription(
+                    activity.claim.object as IdentityPresenter,
+                  ),
+                  ipfsLink: getAtomIpfsLink(
+                    activity.claim.object as IdentityPresenter,
+                  ),
+                  link: getAtomLink(activity.claim.object as IdentityPresenter),
+                  linkComponent: RemixLink,
+                }}
+                isClickable={true}
+              />
+            </Link>
           </ClaimRow>
         )}
       </div>

diff --git a/apps/portal/app/components/list/claims.tsx b/apps/portal/app/components/list/claims.tsx
@@ -12,6 +12,7 @@ import {
 } from '@0xintuition/api'
 
 import { ListHeader } from '@components/list/list-header'
+import RemixLink from '@components/remix-link'
 import { stakeModalAtom } from '@lib/state/store'
 import {
   formatBalance,
@@ -139,6 +140,7 @@ export function ClaimsList({
                     claim.subject as IdentityPresenter,
                     readOnly,
                   ),
+                  linkComponent: RemixLink,
                 }}
                 predicate={{
                   variant: claim.predicate?.is_user
@@ -157,6 +159,7 @@ export function ClaimsList({
                     claim.predicate as IdentityPresenter,
                     readOnly,
                   ),
+                  linkComponent: RemixLink,
                 }}
                 object={{
                   variant: claim.object?.is_user
@@ -173,6 +176,7 @@ export function ClaimsList({
                     claim.object as IdentityPresenter,
                     readOnly,
                   ),
+                  linkComponent: RemixLink,
                 }}
                 isClickable={true}
               />

diff --git a/apps/portal/app/components/profile/connections-header.tsx b/apps/portal/app/components/profile/connections-header.tsx
@@ -9,6 +9,7 @@ import {
 import { ClaimPresenter, IdentityPresenter } from '@0xintuition/api'
 
 import CreateClaimModal from '@components/create-claim/create-claim-modal'
+import RemixLink from '@components/remix-link'
 import { NO_FOLLOW_CLAIM_ERROR, NO_WALLET_ERROR } from '@consts/errors'
 import { createClaimModalAtom } from '@lib/state/store'
 import {
@@ -17,9 +18,10 @@ import {
   getAtomIpfsLink,
   getAtomLabel,
   getAtomLink,
+  getClaimUrl,
   invariant,
 } from '@lib/utils/misc'
-import { useLocation, useRouteLoaderData } from '@remix-run/react'
+import { Link, useLocation, useRouteLoaderData } from '@remix-run/react'
 import { useAtom } from 'jotai'
 
 export const ConnectionsHeaderVariants = {
@@ -103,48 +105,53 @@ export const ConnectionsHeader: React.FC<ConnectionsHeaderProps> = ({
             >
               Follow Claim
             </Text>
-            <Claim
-              size="md"
-              subject={{
-                variant: Identity.nonUser,
-                label: getAtomLabel(followClaim.subject),
-                imgSrc: getAtomImage(followClaim.subject),
-                id: followClaim.subject?.identity_id,
-                description: getAtomDescription(followClaim.subject),
-                ipfsLink: getAtomIpfsLink(followClaim.subject),
-                link: getAtomLink(followClaim.subject),
-              }}
-              predicate={{
-                variant: Identity.nonUser,
-                label: getAtomLabel(followClaim.predicate),
-                imgSrc: getAtomImage(followClaim.predicate),
-                id: followClaim.predicate?.identity_id,
-                description: getAtomDescription(followClaim.predicate),
-                ipfsLink: getAtomIpfsLink(followClaim.predicate),
-                link: getAtomLink(followClaim.predicate),
-              }}
-              object={
-                variant === 'followers'
-                  ? {
-                      variant: Identity.user,
-                      label: getAtomLabel(userIdentity),
-                      imgSrc: getAtomImage(userIdentity),
-                      id: userIdentity?.identity_id,
-                      description: getAtomDescription(userIdentity),
-                      ipfsLink: getAtomIpfsLink(userIdentity),
-                      link: getAtomLink(userIdentity),
-                    }
-                  : {
-                      variant: Identity.nonUser,
-                      label: '?',
-                      imgSrc: '',
-                      id: '?',
-                      description: '?',
-                      ipfsLink: '',
-                      link: '',
-                    }
-              }
-            />
+            <Link to={getClaimUrl(followClaim.vault_id)} prefetch="intent">
+              <Claim
+                size="md"
+                subject={{
+                  variant: Identity.nonUser,
+                  label: getAtomLabel(followClaim.subject),
+                  imgSrc: getAtomImage(followClaim.subject),
+                  id: followClaim.subject?.identity_id,
+                  description: getAtomDescription(followClaim.subject),
+                  ipfsLink: getAtomIpfsLink(followClaim.subject),
+                  link: getAtomLink(followClaim.subject),
+                  linkComponent: RemixLink,
+                }}
+                predicate={{
+                  variant: Identity.nonUser,
+                  label: getAtomLabel(followClaim.predicate),
+                  imgSrc: getAtomImage(followClaim.predicate),
+                  id: followClaim.predicate?.identity_id,
+                  description: getAtomDescription(followClaim.predicate),
+                  ipfsLink: getAtomIpfsLink(followClaim.predicate),
+                  link: getAtomLink(followClaim.predicate),
+                  linkComponent: RemixLink,
+                }}
+                object={
+                  variant === 'followers'
+                    ? {
+                        variant: Identity.user,
+                        label: getAtomLabel(userIdentity),
+                        imgSrc: getAtomImage(userIdentity),
+                        id: userIdentity?.identity_id,
+                        description: getAtomDescription(userIdentity),
+                        ipfsLink: getAtomIpfsLink(userIdentity),
+                        link: getAtomLink(userIdentity),
+                        linkComponent: RemixLink,
+                      }
+                    : {
+                        variant: Identity.nonUser,
+                        label: '?',
+                        imgSrc: '',
+                        id: '?',
+                        description: '?',
+                        ipfsLink: '',
+                      }
+                }
+                isClickable={variant === 'followers'}
+              />
+            </Link>
           </div>
         </div>
       </div>

diff --git a/apps/portal/app/components/remix-link.tsx b/apps/portal/app/components/remix-link.tsx
@@ -0,0 +1,17 @@
+import { Link } from '@remix-run/react'
+
+const RemixLink = ({
+  href,
+  onClick,
+  children,
+}: {
+  href: string
+  onClick: (e: React.MouseEvent) => void
+  children: React.ReactNode
+}) => (
+  <Link to={href} onClick={onClick}>
+    {children}
+  </Link>
+)
+
+export default RemixLink
diff --git a/apps/portal/app/routes/app+/claim+/$id+/index.tsx b/apps/portal/app/routes/app+/claim+/$id+/index.tsx
@@ -12,6 +12,7 @@ import { ClaimsService, IdentityPresenter, VaultType } from '@0xintuition/api'
 
 import { ErrorPage } from '@components/error-page'
 import { PositionsOnClaim } from '@components/list/positions-on-claim'
+import RemixLink from '@components/remix-link'
 import { PaginatedListSkeleton, TabsSkeleton } from '@components/skeleton'
 import { useLiveLoader } from '@lib/hooks/useLiveLoader'
 import { getPositionsOnClaim } from '@lib/services/positions'
@@ -102,6 +103,7 @@ export default function ClaimOverview() {
             description: getAtomDescription(claim.subject as IdentityPresenter),
             ipfsLink: getAtomIpfsLink(claim.subject as IdentityPresenter),
             link: getAtomLink(claim.subject as IdentityPresenter),
+            linkComponent: RemixLink,
           }}
           predicate={{
             variant: claim.predicate?.is_user
@@ -115,6 +117,7 @@ export default function ClaimOverview() {
             ),
             ipfsLink: getAtomIpfsLink(claim.predicate as IdentityPresenter),
             link: getAtomLink(claim.predicate as IdentityPresenter),
+            linkComponent: RemixLink,
           }}
           object={{
             variant: claim.object?.is_user ? Identity.user : Identity.nonUser,
@@ -124,6 +127,7 @@ export default function ClaimOverview() {
             description: getAtomDescription(claim.object as IdentityPresenter),
             ipfsLink: getAtomIpfsLink(claim.object as IdentityPresenter),
             link: getAtomLink(claim.object as IdentityPresenter),
+            linkComponent: RemixLink,
           }}
         />
       </div>

diff --git a/apps/portal/app/routes/app+/claim+/$id.tsx b/apps/portal/app/routes/app+/claim+/$id.tsx
@@ -22,6 +22,7 @@ import {
 import { DetailInfoCard } from '@components/detail-info-card'
 import { ErrorPage } from '@components/error-page'
 import NavigationButton from '@components/navigation-link'
+import RemixLink from '@components/remix-link'
 import ShareCta from '@components/share-cta'
 import ShareModal from '@components/share-modal'
 import StakeModal from '@components/stake/stake-modal'
@@ -163,6 +164,7 @@ export default function ClaimDetails() {
             description: getAtomDescription(claim.subject as IdentityPresenter),
             ipfsLink: getAtomIpfsLink(claim.subject as IdentityPresenter),
             link: getAtomLink(claim.subject as IdentityPresenter),
+            linkComponent: RemixLink,
           }}
           predicate={{
             variant: claim.predicate?.is_user
@@ -176,6 +178,7 @@ export default function ClaimDetails() {
             ),
             ipfsLink: getAtomIpfsLink(claim.predicate as IdentityPresenter),
             link: getAtomLink(claim.predicate as IdentityPresenter),
+            linkComponent: RemixLink,
           }}
           object={{
             variant: claim.object?.is_user ? Identity.user : Identity.nonUser,
@@ -185,6 +188,7 @@ export default function ClaimDetails() {
             description: getAtomDescription(claim.object as IdentityPresenter),
             ipfsLink: getAtomIpfsLink(claim.object as IdentityPresenter),
             link: getAtomLink(claim.object as IdentityPresenter),
+            linkComponent: RemixLink,
           }}
         />
       </div>