From 07bd8dbc10c47a2b97088346bb41feec7dd53b26 Mon Sep 17 00:00:00 2001 From: Vitalsine85 Date: Tue, 12 Nov 2024 15:41:56 -0500 Subject: [PATCH] fix links in claim --- apps/portal/app/components/list/activity.tsx | 132 ++++++++++-------- apps/portal/app/components/list/claims.tsx | 4 + .../components/profile/connections-header.tsx | 93 ++++++------ apps/portal/app/components/remix-link.tsx | 17 +++ .../app/routes/app+/claim+/$id+/index.tsx | 4 + apps/portal/app/routes/app+/claim+/$id.tsx | 4 + .../app/routes/app+/list+/$id+/index.tsx | 3 + .../routes/readonly+/claim+/$id+/index.tsx | 4 + .../app/routes/readonly+/claim+/$id.tsx | 4 + .../app/routes/readonly+/list+/$id+/index.tsx | 3 + packages/1ui/src/components/Claim/Claim.tsx | 46 +++++- .../components/IdentityRow/IdentityRow.tsx | 49 +++++-- .../1ui/src/components/StakeTVL/StakeTVL.tsx | 6 +- 13 files changed, 254 insertions(+), 115 deletions(-) create mode 100644 apps/portal/app/components/remix-link.tsx diff --git a/apps/portal/app/components/list/activity.tsx b/apps/portal/app/components/list/activity.tsx index 44f479dcb..edaf8ef66 100644 --- 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" > - + + + )} diff --git a/apps/portal/app/components/list/claims.tsx b/apps/portal/app/components/list/claims.tsx index c58a26734..567fba578 100644 --- 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 index 3b8663291..8607bcb33 100644 --- 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 = ({ > Follow Claim - + + + diff --git a/apps/portal/app/components/remix-link.tsx b/apps/portal/app/components/remix-link.tsx new file mode 100644 index 000000000..c86f0fc0c --- /dev/null +++ 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 +}) => ( + + {children} + +) + +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 index 219f6d36d..86bf09b56 100644 --- 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, }} /> diff --git a/apps/portal/app/routes/app+/claim+/$id.tsx b/apps/portal/app/routes/app+/claim+/$id.tsx index 2b4582421..53a5d1b03 100644 --- 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, }} /> diff --git a/apps/portal/app/routes/app+/list+/$id+/index.tsx b/apps/portal/app/routes/app+/list+/$id+/index.tsx index 63d47f57f..f8246524a 100644 --- a/apps/portal/app/routes/app+/list+/$id+/index.tsx +++ b/apps/portal/app/routes/app+/list+/$id+/index.tsx @@ -24,6 +24,7 @@ import { ErrorPage } from '@components/error-page' import { InfoPopover } from '@components/info-popover' import { TagsList } from '@components/list/tags' import { ListTabIdentityDisplay } from '@components/lists/list-tab-identity-display' +import RemixLink from '@components/remix-link' import SaveListModal from '@components/save-list/save-list-modal' import { DataHeaderSkeleton, PaginatedListSkeleton } from '@components/skeleton' import { useLiveLoader } from '@lib/hooks/useLiveLoader' @@ -217,6 +218,7 @@ export default function ListOverview() { claim.predicate as IdentityPresenter, ), link: getAtomLink(claim.predicate as IdentityPresenter), + linkComponent: RemixLink, }} object={{ variant: claim.object?.is_user ? 'user' : 'non-user', @@ -230,6 +232,7 @@ export default function ListOverview() { claim.object as IdentityPresenter, ), link: getAtomLink(claim.object as IdentityPresenter), + linkComponent: RemixLink, }} /> diff --git a/apps/portal/app/routes/readonly+/claim+/$id+/index.tsx b/apps/portal/app/routes/readonly+/claim+/$id+/index.tsx index dfb6250af..c20f87080 100644 --- a/apps/portal/app/routes/readonly+/claim+/$id+/index.tsx +++ b/apps/portal/app/routes/readonly+/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' @@ -101,6 +102,7 @@ export default function ReadOnlyClaimOverview() { 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 @@ -114,6 +116,7 @@ export default function ReadOnlyClaimOverview() { ), ipfsLink: getAtomIpfsLink(claim.predicate as IdentityPresenter), link: getAtomLink(claim.predicate as IdentityPresenter), + linkComponent: RemixLink, }} object={{ variant: claim.object?.is_user ? Identity.user : Identity.nonUser, @@ -123,6 +126,7 @@ export default function ReadOnlyClaimOverview() { description: getAtomDescription(claim.object as IdentityPresenter), ipfsLink: getAtomIpfsLink(claim.object as IdentityPresenter), link: getAtomLink(claim.object as IdentityPresenter), + linkComponent: RemixLink, }} /> diff --git a/apps/portal/app/routes/readonly+/claim+/$id.tsx b/apps/portal/app/routes/readonly+/claim+/$id.tsx index d08cee07a..e61a6838f 100644 --- a/apps/portal/app/routes/readonly+/claim+/$id.tsx +++ b/apps/portal/app/routes/readonly+/claim+/$id.tsx @@ -9,6 +9,7 @@ import { import { DetailInfoCard } from '@components/detail-info-card' import { ErrorPage } from '@components/error-page' import ReadOnlyBanner from '@components/read-only-banner' +import RemixLink from '@components/remix-link' import { useLiveLoader } from '@lib/hooks/useLiveLoader' import { getClaim } from '@lib/services/claims' import { getSpecialPredicate } from '@lib/utils/app' @@ -147,6 +148,7 @@ export default function ReadOnlyClaimDetails() { 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 @@ -160,6 +162,7 @@ export default function ReadOnlyClaimDetails() { ), ipfsLink: getAtomIpfsLink(claim.predicate as IdentityPresenter), link: getAtomLink(claim.predicate as IdentityPresenter), + linkComponent: RemixLink, }} object={{ variant: claim.object?.is_user ? Identity.user : Identity.nonUser, @@ -169,6 +172,7 @@ export default function ReadOnlyClaimDetails() { description: getAtomDescription(claim.object as IdentityPresenter), ipfsLink: getAtomIpfsLink(claim.object as IdentityPresenter), link: getAtomLink(claim.object as IdentityPresenter), + linkComponent: RemixLink, }} /> diff --git a/apps/portal/app/routes/readonly+/list+/$id+/index.tsx b/apps/portal/app/routes/readonly+/list+/$id+/index.tsx index c98ce532f..bdecd3d0c 100644 --- a/apps/portal/app/routes/readonly+/list+/$id+/index.tsx +++ b/apps/portal/app/routes/readonly+/list+/$id+/index.tsx @@ -19,6 +19,7 @@ import { import { ErrorPage } from '@components/error-page' import { TagsList } from '@components/list/tags' import { ListTabIdentityDisplay } from '@components/lists/list-tab-identity-display' +import RemixLink from '@components/remix-link' import { DataHeaderSkeleton, PaginatedListSkeleton } from '@components/skeleton' import { useLiveLoader } from '@lib/hooks/useLiveLoader' import { getListClaims } from '@lib/services/lists' @@ -158,6 +159,7 @@ export default function ReadOnlyListOverview() { claim.predicate as IdentityPresenter, true, ), + linkComponent: RemixLink, }} object={{ variant: claim.object?.is_user ? 'user' : 'non-user', @@ -171,6 +173,7 @@ export default function ReadOnlyListOverview() { claim.object as IdentityPresenter, ), link: getAtomLink(claim.object as IdentityPresenter, true), + linkComponent: RemixLink, }} /> diff --git a/packages/1ui/src/components/Claim/Claim.tsx b/packages/1ui/src/components/Claim/Claim.tsx index 991bd48da..24cbccd6d 100644 --- a/packages/1ui/src/components/Claim/Claim.tsx +++ b/packages/1ui/src/components/Claim/Claim.tsx @@ -23,6 +23,11 @@ interface ClaimItemProps { ipfsLink?: string link?: string shouldHover?: boolean + linkComponent?: React.ComponentType<{ + href: string + onClick: (e: React.MouseEvent) => void + children: React.ReactNode + }> } export interface ClaimProps { @@ -34,6 +39,11 @@ export interface ClaimProps { orientation?: 'horizontal' | 'vertical' isClickable?: boolean maxIdentityLength?: number + linkComponent?: React.ComponentType<{ + href: string + onClick: (e: React.MouseEvent) => void + children: React.ReactNode + }> } export const Claim = ({ @@ -130,6 +140,7 @@ const ClaimItem = ({ isHovered, onMouseEnter, onMouseLeave, + linkComponent: LinkComponent, }: { item: ClaimItemProps link?: string @@ -140,6 +151,11 @@ const ClaimItem = ({ isHovered: boolean onMouseEnter: () => void onMouseLeave: () => void + linkComponent?: React.ComponentType<{ + href: string + onClick: (e: React.MouseEvent) => void + children: React.ReactNode + }> }) => { const effectiveMaxLength = maxIdentityLength ?? 24 @@ -175,14 +191,40 @@ const ClaimItem = ({ ) + const linkProps = { + href: item.link || '', + onClick: (e: React.MouseEvent) => e.stopPropagation(), + children: {content}, + } + if (disabled || !shouldHover) { - return item.link ? {content} : content + return item.link ? ( + LinkComponent ? ( + + ) : ( + + {content} + + ) + ) : ( + content + ) } return ( - {item.link ? {content} : content} + {item.link ? ( + LinkComponent ? ( + + ) : ( + + {content} + + ) + ) : ( + content + )} { variant?: IdentityType totalTVL: string currency?: CurrencyType + id: string name: string description?: string claimLink?: string @@ -38,9 +46,12 @@ const IdentityRow = ({ variant = Identity.user, totalTVL, currency, + id, name, + description, avatarSrc, link, + ipfsLink, numPositions, className, userPosition, @@ -67,15 +78,35 @@ const IdentityRow = ({ )} >
- - + + + + {name} + + + + - {name} - - +
+ +
+ +
diff --git a/packages/1ui/src/components/StakeTVL/StakeTVL.tsx b/packages/1ui/src/components/StakeTVL/StakeTVL.tsx index 339927b10..09e02c556 100644 --- a/packages/1ui/src/components/StakeTVL/StakeTVL.tsx +++ b/packages/1ui/src/components/StakeTVL/StakeTVL.tsx @@ -63,7 +63,11 @@ const StakeTVL = React.forwardRef( {isClaim && (
0) || (tvlAgainst && +tvlAgainst > 0) + ? PieChartVariant.forVsAgainst + : PieChartVariant.default + } size={PieChartSize.sm} percentage={stakedForPercentage} />