yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { CurrencyDollarIcon } from "@heroicons/react/24/outline";
2import { tokens } from "@hey/data/tokens";
3import {
4 type GroupFragment,
5 type GroupRules,
6 useBalancesBulkQuery
7} from "@hey/indexer";
8import TopUpButton from "@/components/Shared/Account/TopUp/Button";
9import Loader from "@/components/Shared/Loader";
10import LoginButton from "@/components/Shared/LoginButton";
11import { H3, H5 } from "@/components/Shared/UI";
12import getTokenImage from "@/helpers/getTokenImage";
13import { getSimplePaymentDetails } from "@/helpers/rules";
14import { useSuperJoinModalStore } from "@/store/non-persisted/modal/useSuperJoinModalStore";
15import { useAccountStore } from "@/store/persisted/useAccountStore";
16import Join from "./Join";
17
18const SuperJoin = () => {
19 const { currentAccount } = useAccountStore();
20 const { superJoiningGroup, setShowSuperJoinModal } = useSuperJoinModalStore();
21 const { assetAddress, assetSymbol, amount } = getSimplePaymentDetails(
22 superJoiningGroup?.rules as GroupRules
23 );
24 const enabledTokens = tokens.map((t) => t.symbol);
25 const isTokenEnabled = enabledTokens?.includes(assetSymbol || "");
26
27 const { data: balance, loading: balanceLoading } = useBalancesBulkQuery({
28 fetchPolicy: "no-cache",
29 pollInterval: 3000,
30 skip: !assetAddress || !currentAccount?.address,
31 variables: {
32 request: { address: currentAccount?.address, tokens: [assetAddress] }
33 }
34 });
35
36 if (!assetAddress || !assetSymbol || !amount) {
37 return null;
38 }
39
40 if (balanceLoading) {
41 return <Loader className="my-10" message="Loading Super join" />;
42 }
43
44 const tokenBalance =
45 balance?.balancesBulk[0].__typename === "Erc20Amount"
46 ? balance.balancesBulk[0].value
47 : 0;
48
49 const hasEnoughBalance = Number(tokenBalance) >= Number(amount || 0);
50
51 return (
52 <div className="p-5">
53 <div className="space-y-1.5 pb-2">
54 <H5>Super Join</H5>
55 <div className="text-gray-500 dark:text-gray-200">
56 Support your favorite group on Hey.
57 </div>
58 </div>
59 <div className="flex items-center space-x-1.5 py-2">
60 {isTokenEnabled ? (
61 <img
62 alt={assetSymbol}
63 className="size-7 rounded-full"
64 height={28}
65 src={getTokenImage(assetSymbol)}
66 title={assetSymbol}
67 width={28}
68 />
69 ) : (
70 <CurrencyDollarIcon className="size-7" />
71 )}
72 <span className="space-x-1">
73 <H3 as="span">{amount}</H3>
74 <span className="text-xs">{assetSymbol}</span>
75 </span>
76 </div>
77 <div className="mt-5">
78 {currentAccount?.address ? (
79 hasEnoughBalance ? (
80 <Join
81 className="w-full"
82 group={superJoiningGroup as GroupFragment}
83 onSuccess={() => setShowSuperJoinModal(false, superJoiningGroup)}
84 small={false}
85 title={
86 superJoiningGroup?.membershipApprovalEnabled
87 ? "Request to join"
88 : "Super Join"
89 }
90 />
91 ) : (
92 <TopUpButton
93 amountToTopUp={
94 Math.ceil((amount - Number(tokenBalance)) * 20) / 20
95 }
96 className="w-full"
97 token={{ contractAddress: assetAddress, symbol: assetSymbol }}
98 />
99 )
100 ) : (
101 <LoginButton className="w-full" title="Login to Join" />
102 )}
103 </div>
104 </div>
105 );
106};
107
108export default SuperJoin;