Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

ENG-4764 feat(portal,graphql): user profile overview using graphql #955

Merged
merged 3 commits into from
Nov 27, 2024
Merged

ENG-4764 feat(portal,graphql): user profile overview using graphql #955

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a689b33
Updates the queries needed for all of the aggregate values on the use…
jonathanprozzi Nov 26, 2024
a1ffe83
All queries working and loading on the page, now ready to update the UI
jonathanprozzi Nov 27, 2024
2cd56e3
Adds in everything for Overview with exception of Lists -- still uses…
jonathanprozzi Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 82 additions & 0 deletions apps/portal/app/components/profile/overview-about-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,87 @@ export const DataAboutHeaderVariants = {
export type OverviewAboutHeaderVariantType =
(typeof DataAboutHeaderVariants)[keyof typeof DataAboutHeaderVariants]

interface OverviewAboutHeaderPropsNew
extends React.HTMLAttributes<HTMLDivElement> {
variant: OverviewAboutHeaderVariantType
atomImage?: string
atomLabel?: string
atomVariant?: 'user' | 'non-user'
totalClaims?: number
totalPositions?: number
totalStake: number
link: string
}

export function OverviewAboutHeaderNew({
variant,
atomImage,
atomLabel,
atomVariant,
totalClaims,
totalPositions,
totalStake,
link,
...props
}: OverviewAboutHeaderPropsNew) {
return (
<div
className="flex flex-col gap-4 w-full p-6 bg-black rounded-xl theme-border max-md:items-center"
{...props}
>
<div className="flex items-center gap-1.5">
<Text
variant="body"
weight="regular"
className="text-secondary-foreground"
>
{variant === 'claims' ? 'Claims about' : 'Conviction in'}
</Text>
<IdentityTag imgSrc={atomImage} variant={atomVariant}>
<Trunctacular value={atomLabel ?? ''} maxStringLength={40} />
</IdentityTag>
</div>
<div className="flex w-full gap-10 max-sm:flex-col max-sm:gap-4">
<div className="flex w-full gap-10 max-sm:justify-center">
<div className="flex flex-col max-md:items-center">
<Text
variant="caption"
weight="regular"
className="text-secondary-foreground"
>
{variant === 'claims' ? 'Claims' : 'Positions'}
</Text>
<Text variant="bodyLarge" weight="medium" className="items-center">
{variant === 'claims' ? totalClaims ?? 0 : totalPositions ?? 0}
</Text>
</div>
<div className="flex flex-col max-md:items-center">
<Text
variant="caption"
weight="regular"
className="text-secondary-foreground"
>
TVL
</Text>
<MonetaryValue value={totalStake} currency="ETH" />
</div>
</div>
<div className="flex flex-col items-end justify-end ml-auto max-sm:w-full max-sm:items-center">
<Link to={link} prefetch="intent">
<Button variant={ButtonVariant.secondary} className="w-max mb-1">
<Icon
name={variant === 'claims' ? IconName.claim : IconName.ethereum}
className="h-4 w-4"
/>{' '}
View All {variant === 'claims' ? 'Claims' : 'Positions'}
</Button>
</Link>
</div>
</div>
</div>
)
}

interface OverviewAboutHeaderProps
extends React.HTMLAttributes<HTMLDivElement> {
variant: OverviewAboutHeaderVariantType
Expand All @@ -32,6 +113,7 @@ interface OverviewAboutHeaderProps
link: string
}

// Legacy component included until we finish migrating
export function OverviewAboutHeader({
variant,
userIdentity,
Expand Down
Loading
Loading