yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { ZORA_API_KEY } from "@hey/data/constants";
2import type { AccountFragment } from "@hey/indexer";
3import { useQuery } from "@tanstack/react-query";
4import { type GetCoinResponse, getCoin, setApiKey } from "@zoralabs/coins-sdk";
5import { useState } from "react";
6import type { Address } from "viem";
7import { base } from "viem/chains";
8import getAccountAttribute from "@/helpers/getAccountAttribute";
9import { Image, Modal } from "../../Shared/UI";
10import MetaDetails from "../MetaDetails";
11import CreatorCoinDetails from "./CreatorCoinDetails";
12
13setApiKey(ZORA_API_KEY);
14
15interface CreatorCoinProps {
16 account: AccountFragment;
17}
18
19const CreatorCoin = ({ account }: CreatorCoinProps) => {
20 const [showModal, setShowModal] = useState(false);
21 const creatorCoinAddress = getAccountAttribute(
22 "creatorCoinAddress",
23 account?.metadata?.attributes
24 );
25
26 const { data: coin } = useQuery<GetCoinResponse["zora20Token"] | null>({
27 enabled: !!creatorCoinAddress,
28 queryFn: async () => {
29 const coin = await getCoin({
30 address: creatorCoinAddress,
31 chain: base.id
32 });
33 return coin.data?.zora20Token ?? null;
34 },
35 queryKey: ["coin", creatorCoinAddress]
36 });
37
38 if (!coin) {
39 return null;
40 }
41
42 return (
43 <>
44 <button
45 className="rounded-full bg-gray-200 px-2 dark:bg-gray-700"
46 onClick={() => setShowModal(true)}
47 type="button"
48 >
49 <MetaDetails
50 icon={
51 <Image
52 alt={coin.name}
53 className="size-4 rounded-full"
54 height={16}
55 src={coin.mediaContent?.previewImage?.medium}
56 width={16}
57 />
58 }
59 >
60 ${coin.symbol}
61 </MetaDetails>
62 </button>
63 <Modal
64 onClose={() => setShowModal(false)}
65 show={showModal}
66 title="Creator Coin"
67 >
68 <CreatorCoinDetails address={coin.address as Address} />
69 </Modal>
70 </>
71 );
72};
73
74export default CreatorCoin;