Skip to content

Commit 5f1241a

Browse files
tnkshuuheitnkshuuhei
authored
Merge pull request #509 from hypercerts-org/feat/hypercerts-contributors
feat: display ENS/user name on contributor component
2 parents af6c7c6 + 17e226e commit 5f1241a

File tree

3 files changed

+146
-17
lines changed

3 files changed

+146
-17
lines changed

‎components/hypercert/contributors.tsx

+49-5
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,60 @@ import {
1111
} from "@/components/ui/command";
1212
import { UserCircle2 } from "lucide-react";
1313
import { useState } from "react";
14-
import { isAddress } from "viem";
14+
import { getAddress, isAddress } from "viem";
1515
import { HypercertState } from "@/hypercerts/fragments/hypercert-state.fragment";
16+
import { useGetUser } from "@/users/hooks";
17+
import { UserIcon } from "../user-icon";
18+
import { ImageIcon } from "../user-icon/ImageIcon";
19+
import { SvgIcon } from "../user-icon/SvgIcon";
20+
import { Skeleton } from "../ui/skeleton";
21+
import { UserName } from "../user-name";
1622
const MAX_CONTRIBUTORS_DISPLAYED = 10;
1723

1824
function Contributor({ contributor }: { contributor: string }) {
19-
return isAddress(contributor) ? (
20-
<EthAddress address={contributor} />
25+
const address = isAddress(contributor.trim())
26+
? getAddress(contributor.trim())
27+
: undefined;
28+
29+
const { data: userData, isFetching } = useGetUser({
30+
address: address,
31+
});
32+
33+
if (isFetching) {
34+
return (
35+
<div className="flex flex-row gap-2 items-center">
36+
<Skeleton className="h-8 w-8 rounded-full" />
37+
<Skeleton className="h-8 w-32" />
38+
</div>
39+
);
40+
}
41+
42+
return userData?.user ? (
43+
<div className="flex gap-2">
44+
{userData.user.avatar ? (
45+
<ImageIcon url={userData.user.avatar} size="tiny" />
46+
) : (
47+
<SvgIcon size="tiny" />
48+
)}
49+
<div className="flex flex-col justify-center items-start">
50+
<UserName
51+
address={userData.user.address}
52+
userName={userData.user.display_name}
53+
/>
54+
</div>
55+
</div>
56+
) : address ? (
57+
<div className="flex gap-2">
58+
<UserIcon address={address} size="tiny" />
59+
<div className="flex flex-col justify-center items-start">
60+
<EthAddress address={address} showEnsName={true} />
61+
</div>
62+
</div>
2163
) : (
22-
<div>{contributor}</div>
64+
<div className="flex items-center flex-row">
65+
<UserCircle2 className="mr-2 h-4 w-4" />
66+
{contributor}
67+
</div>
2368
);
2469
}
2570

@@ -58,7 +103,6 @@ export default function Contributors({
58103
<CommandGroup>
59104
{hypercert.metadata?.contributors.map((contributor) => (
60105
<CommandItem key={contributor}>
61-
<UserCircle2 className="mr-2 h-4 w-4" />
62106
<Contributor contributor={contributor} />
63107
</CommandItem>
64108
))}

‎components/hypercert/fractions.tsx

+67-12
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,82 @@ import {
88
CommandItem,
99
CommandList,
1010
} from "@/components/ui/command";
11-
import { truncateEthereumAddress } from "@/lib/utils";
12-
import { UserCircle2 } from "lucide-react";
1311
import { useState } from "react";
1412
import { FormattedUnits } from "../formatted-units";
1513
import { HypercertState } from "@/hypercerts/fragments/hypercert-state.fragment";
16-
14+
import { getAddress, isAddress } from "viem";
15+
import { useGetUser } from "@/users/hooks";
16+
import { Skeleton } from "../ui/skeleton";
17+
import { UserIcon } from "../user-icon";
18+
import { ImageIcon } from "../user-icon/ImageIcon";
19+
import { SvgIcon } from "../user-icon/SvgIcon";
20+
import EthAddress from "../eth-address";
21+
import { UserName } from "../user-name";
22+
import { calculateBigIntPercentage } from "@/lib/calculateBigIntPercentage";
1723
const MAX_FRACTIONS_DISPLAYED = 5;
1824

1925
function Fraction({
2026
ownerAddress,
27+
totalUnits,
2128
units,
2229
}: {
23-
ownerAddress: string | null;
24-
units: unknown;
30+
ownerAddress: string;
31+
totalUnits: string | null | undefined;
32+
units: string | null | undefined;
2533
}) {
34+
const address = isAddress(ownerAddress.trim())
35+
? getAddress(ownerAddress.trim())
36+
: undefined;
37+
38+
const { data: userData, isFetching } = useGetUser({
39+
address: address,
40+
});
41+
42+
const calculatedPercentage = calculateBigIntPercentage(
43+
units as string,
44+
totalUnits as string,
45+
);
46+
47+
const roundedPercentage =
48+
calculatedPercentage! < 1
49+
? "<1"
50+
: Math.round(calculatedPercentage!).toString();
51+
52+
if (isFetching) {
53+
return (
54+
<div className="flex flex-row gap-2 items-center">
55+
<Skeleton className="h-8 w-8 rounded-full" />
56+
<Skeleton className="h-8 w-32" />
57+
</div>
58+
);
59+
}
2660
return (
27-
<div className="flex flex-col w-full">
28-
{truncateEthereumAddress(ownerAddress as `0x${string}`)} &mdash;{" "}
29-
<FormattedUnits>{units as string}</FormattedUnits>
30-
</div>
61+
<>
62+
{userData?.user ? (
63+
<div className="flex flex-row gap-2">
64+
{userData?.user?.avatar ? (
65+
<ImageIcon url={userData.user.avatar} size="tiny" />
66+
) : (
67+
<SvgIcon size="tiny" />
68+
)}
69+
<div className="flex justify-center items-start">
70+
<UserName
71+
address={userData.user.address}
72+
userName={userData.user.display_name}
73+
/>
74+
</div>
75+
</div>
76+
) : (
77+
<div className="flex flex-row items-center gap-2">
78+
<UserIcon address={address} size="tiny" />
79+
<EthAddress address={address} showEnsName={true} />
80+
</div>
81+
)}
82+
<div className="flex flex-row items-center gap-2">
83+
&mdash; <FormattedUnits>{units as string}</FormattedUnits>
84+
<span>{`(${roundedPercentage}%)`}</span>
85+
</div>
86+
</>
3187
);
3288
}
3389

@@ -77,10 +133,9 @@ export default function Fractions({
77133
key={fraction.fraction_id}
78134
title={fraction.owner_address || ""}
79135
>
80-
<UserCircle2 className="mr-2 h-4 w-4" />
81-
<span className="hidden">{fraction.owner_address}</span>
82136
<Fraction
83-
ownerAddress={fraction.owner_address}
137+
ownerAddress={fraction.owner_address as string}
138+
totalUnits={hypercert.units}
84139
units={fraction.units}
85140
/>
86141
</CommandItem>

‎components/user-name.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from "react";
2+
import { CopyButton } from "./copy-button";
3+
4+
export function UserName({
5+
address,
6+
userName,
7+
}: {
8+
address: string | undefined | null;
9+
userName: string | undefined | null;
10+
}) {
11+
const copyAddress = (event: React.MouseEvent<HTMLDivElement>) => {
12+
event.stopPropagation();
13+
void navigator.clipboard.writeText(address as string);
14+
};
15+
16+
if (!address) {
17+
return <div>Unknown</div>;
18+
}
19+
return (
20+
<div className="flex items-center gap-2 content-center cursor-pointer px-1 py-0.5 bg-slate-100 rounded-md w-max text-sm">
21+
<div onClick={copyAddress}>
22+
<p>{userName}</p>
23+
</div>
24+
<CopyButton
25+
textToCopy={address}
26+
className="w-4 h-4 bg-transparent focus:opacity-70 focus:scale-90"
27+
/>
28+
</div>
29+
);
30+
}

0 commit comments

Comments
 (0)