yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
2import { BLOCK_EXPLORER_URL, DEFAULT_AVATAR } from "@hey/data/constants";
3import formatAddress from "@hey/helpers/formatAddress";
4import { Link } from "react-router";
5import type { Address } from "viem";
6import { useEnsName } from "wagmi";
7import Slug from "@/components/Shared/Slug";
8import { Image } from "@/components/Shared/UI";
9
10interface WalletAccountProps {
11 address: Address;
12}
13
14const WalletAccount = ({ address }: WalletAccountProps) => {
15 const { data, isLoading } = useEnsName({ address });
16
17 const displayName = isLoading
18 ? formatAddress(address)
19 : data || formatAddress(address);
20
21 return (
22 <div className="flex items-center gap-x-3">
23 <Image
24 alt={address}
25 className="size-10 rounded-full border bg-gray-200"
26 height={40}
27 src={DEFAULT_AVATAR}
28 width={40}
29 />
30 <Link
31 rel="noreferrer noopener"
32 target="_blank"
33 to={`${BLOCK_EXPLORER_URL}/address/${address}`}
34 >
35 <div className="flex items-center gap-1.5">
36 <div>{displayName}</div>
37 <ArrowTopRightOnSquareIcon className="size-4" />
38 </div>
39 <Slug className="text-sm" slug={formatAddress(address)} />
40 </Link>
41 </div>
42 );
43};
44
45export default WalletAccount;