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