yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import { XMarkIcon } from "@heroicons/react/24/outline";
2import getAccount from "@hey/helpers/getAccount";
3import { useAccountsBulkQuery } from "@hey/indexer";
4import { memo } from "react";
5import { useNavigate } from "react-router";
6import SingleAccount from "@/components/Shared/Account/SingleAccount";
7import Loader from "@/components/Shared/Loader";
8import { H6 } from "@/components/Shared/UI";
9import stopEventPropagation from "@/helpers/stopEventPropagation";
10import { useAccountLinkStore } from "@/store/non-persisted/navigation/useAccountLinkStore";
11import { useSearchStore } from "@/store/persisted/useSearchStore";
12
13interface RecentAccountsProps {
14 onAccountClick: () => void;
15}
16
17const RecentAccounts = ({ onAccountClick }: RecentAccountsProps) => {
18 const navigate = useNavigate();
19 const {
20 addAccount,
21 clearAccount,
22 clearAccounts,
23 accounts: recentAccounts
24 } = useSearchStore();
25 const { setCachedAccount } = useAccountLinkStore();
26
27 const { data, loading } = useAccountsBulkQuery({
28 skip: !recentAccounts.length,
29 variables: { request: { addresses: recentAccounts } }
30 });
31
32 if (!recentAccounts.length) {
33 return null;
34 }
35
36 const accounts = data?.accountsBulk || [];
37
38 return (
39 <div>
40 {loading ? (
41 <Loader className="my-3" message="Loading recent accounts" small />
42 ) : (
43 <div>
44 <div className="flex items-center justify-between px-4 pt-1 pb-2">
45 <b>Recent</b>
46 <button onClick={clearAccounts} type="button">
47 <H6 className="text-gray-500 dark:text-gray-200">Clear all</H6>
48 </button>
49 </div>
50 {accounts.map((account) => (
51 <div
52 className="flex cursor-pointer items-center space-x-3 truncate px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-800"
53 key={account.address}
54 onClick={() => {
55 setCachedAccount(account);
56 addAccount(account.address);
57 navigate(getAccount(account).link);
58 onAccountClick();
59 }}
60 >
61 <div className="w-full">
62 <SingleAccount
63 account={account}
64 hideFollowButton
65 hideUnfollowButton
66 linkToAccount={false}
67 showUserPreview={false}
68 />
69 </div>
70 <button
71 onClick={(event) => {
72 stopEventPropagation(event);
73 clearAccount(account.address);
74 }}
75 type="reset"
76 >
77 <XMarkIcon className="size-4 text-gray-500" />
78 </button>
79 </div>
80 ))}
81 </div>
82 )}
83 <div className="divider my-2" />
84 </div>
85 );
86};
87
88export default memo(RecentAccounts);