feat: Trending users @ghobs91

packages/app/src/Element/FollowButton.tsx

@@ -5,6 +5,7 @@ import { HexKey } from "@snort/nostr";
 import useEventPublisher from "Feed/EventPublisher";
 import { parseId } from "Util";
 import useLogin from "Hooks/useLogin";
+import AsyncButton from "Element/AsyncButton";
 
 import messages from "./messages";
 
@@ -37,11 +38,10 @@ export default function FollowButton(props: FollowButtonProps) {
   }
 
   return (
-    <button
-      type="button"
+    <AsyncButton
       className={isFollowing ? `${baseClassname} secondary` : baseClassname}
       onClick={() => (isFollowing ? unfollow(pubkey) : follow(pubkey))}>
       {isFollowing ? <FormattedMessage {...messages.Unfollow} /> : <FormattedMessage {...messages.Follow} />}
-    </button>
+    </AsyncButton>
   );
 }

packages/app/src/Element/TrendingUsers.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState } from "react";
+import { HexKey } from "@snort/nostr";
+import { FormattedMessage } from "react-intl";
+
+import FollowListBase from "Element/FollowListBase";
+import PageSpinner from "Element/PageSpinner";
+
+interface TrendingUser {
+  pubkey: HexKey;
+}
+
+interface TrendingUserResponse {
+  profiles: Array<TrendingUser>;
+}
+
+async function fetchTrendingUsers() {
+  try {
+    const res = await fetch(`https://api.nostr.band/v0/trending/profiles`);
+    if (res.ok) {
+      const data = (await res.json()) as TrendingUserResponse;
+      return data.profiles.map(a => a.pubkey);
+    }
+  } catch (e) {
+    console.warn(`Failed to load link preview`);
+  }
+}
+
+const TrendingUsers = () => {
+  const [userList, setUserList] = useState<HexKey[]>();
+
+  useEffect(() => {
+    (async () => {
+      const data = await fetchTrendingUsers();
+      if (data) {
+        setUserList(data);
+      }
+    })();
+  }, []);
+
+  if (!userList) return <PageSpinner />;
+
+  return (
+    <>
+      <h3>
+        <FormattedMessage defaultMessage="Trending Users" />
+      </h3>
+      <FollowListBase pubkeys={userList} />
+    </>
+  );
+};
+
+export default TrendingUsers;

packages/app/src/Pages/SearchPage.tsx

@@ -9,6 +9,7 @@ import { SearchRelays } from "Const";
 import { System } from "System";
 import { MetadataCache } from "Cache";
 import { UserCache } from "Cache/UserCache";
+import TrendingUsers from "Element/TrendingUsers";
 
 import messages from "./messages";
 
@@ -64,6 +65,7 @@ const SearchPage = () => {
           autoFocus={true}
         />
       </div>
+      {!keyword && <TrendingUsers />}
       {keyword && allUsers?.slice(0, 3).map(u => <ProfilePreview actions={<></>} className="card" pubkey={u.pubkey} />)}
       {keyword && (
         <Timeline