From 1f55582e2bcf36eecbafadf7ce14659090c86288 Mon Sep 17 00:00:00 2001 From: Dominik Stumpf Date: Wed, 28 Aug 2024 16:55:53 +0200 Subject: [PATCH 1/9] chore: try adding farcaster integration --- .../profile/_components/ProfileHero.tsx | 62 ++++++++++++++----- 1 file changed, 48 insertions(+), 14 deletions(-) diff --git a/src/app/(marketing)/profile/_components/ProfileHero.tsx b/src/app/(marketing)/profile/_components/ProfileHero.tsx index f79fd94880..dfe4911bbf 100644 --- a/src/app/(marketing)/profile/_components/ProfileHero.tsx +++ b/src/app/(marketing)/profile/_components/ProfileHero.tsx @@ -1,5 +1,6 @@ "use client" +import FarcasterImage from "@/../static/socialIcons/farcaster.svg" import { CheckMark } from "@/components/CheckMark" import { LayoutContainer } from "@/components/Layout" import { ProfileAvatar } from "@/components/ProfileAvatar" @@ -9,15 +10,32 @@ import { Button } from "@/components/ui/Button" import { Card } from "@/components/ui/Card" import { Separator } from "@/components/ui/Separator" import { Pencil } from "@phosphor-icons/react" +import useUser from "components/[guild]/hooks/useUser" +import useSWRImmutable from "swr/immutable" import { ProfileOwnerGuard } from "../_components/ProfileOwnerGuard" import { useProfile } from "../_hooks/useProfile" import { useReferredUsers } from "../_hooks/useReferredUsers" import { EditProfile } from "./EditProfile/EditProfile" import { ProfileHeroSkeleton } from "./ProfileSkeleton" +const useProfileFarcaster = () => { + const { data: profile } = useProfile() + const { farcasterProfiles } = useUser(profile?.userId) + const fcProfile = farcasterProfiles?.at(0) + console.log(fcProfile) + return useSWRImmutable( + fcProfile + ? `https://api.neynar.com/v2/farcaster/user/bulk?api_key=NEYNAR_API_DOCS&fids=${fcProfile.fid}` + : null + ) +} + export const ProfileHero = () => { const { data: profile } = useProfile() const { data: referredUsers } = useReferredUsers() + const profileFarcaster = useProfileFarcaster() + console.log(profileFarcaster.data) + const fc = profileFarcaster.data?.users.at(0) if (!profile || !referredUsers) return @@ -55,24 +73,40 @@ export const ProfileHero = () => {

{profile.bio}

-
+ {/*
*/} +
{referredUsers.length}
Guildmates
- -
-
0
-
Followers
-
- -
- -
- Followed by Hoho,
- Hihi and 22 others -
-
+ {fc && ( + <> + +
+
{fc.follower_count}
+
+ + Followers +
+
+ +
+
{fc.following_count}
+
+ + Following +
+
+ +
+ +
+ Followed by Hoho,{" "} + Hihi and 22 others on Farcaster +
+
+ + )}
From 0d07f1209be63d232f3dde89a27e27c8808fdbd5 Mon Sep 17 00:00:00 2001 From: Dominik Stumpf Date: Mon, 2 Sep 2024 22:28:24 +0200 Subject: [PATCH 2/9] feat: refine ProfileHero --- .../(marketing)/profile/[username]/page.tsx | 2 +- .../profile/_components/ProfileHero.tsx | 69 ++++++++++--------- 2 files changed, 39 insertions(+), 32 deletions(-) diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx index e9c959ec94..d81025071a 100644 --- a/src/app/(marketing)/profile/[username]/page.tsx +++ b/src/app/(marketing)/profile/[username]/page.tsx @@ -77,7 +77,7 @@ const fetchPublicProfileData = async ({ neynarRequest && (await ssrFetcher(neynarRequest, { next: { - revalidate: 12 * 3600, + revalidate: 24 * 3600, }, })) diff --git a/src/app/(marketing)/profile/_components/ProfileHero.tsx b/src/app/(marketing)/profile/_components/ProfileHero.tsx index 1aab45366a..c1cdbab313 100644 --- a/src/app/(marketing)/profile/_components/ProfileHero.tsx +++ b/src/app/(marketing)/profile/_components/ProfileHero.tsx @@ -45,11 +45,9 @@ export const ProfileHero = () => { const profileFarcaster = useProfileFarcaster() const fc = profileFarcaster.followers.data?.users.at(0) const relevantFc = - profileFarcaster.relevantFollowers.data?.top_relevant_followers_hydrated - console.log( - relevantFc, - relevantFc?.map(({ user }) => user.pfp_url) - ) + profileFarcaster.relevantFollowers.data?.top_relevant_followers_hydrated?.map( + ({ user }) => user + ) if (!profile || !referredUsers) return return ( @@ -86,7 +84,6 @@ export const ProfileHero = () => {

{profile.bio}

- {/*
*/}
{referredUsers.length}
@@ -94,14 +91,6 @@ export const ProfileHero = () => {
{fc && ( <> - -
-
{fc.follower_count}
-
- - Followers -
-
{fc.following_count}
@@ -110,24 +99,21 @@ export const ProfileHero = () => { Following
- {relevantFc && fc && ( - <> - -
- user.pfp_url)} - count={relevantFc.length} - /> -
- Followed by HOho,{" "} - Hihi and 22 others on - Farcaster -
+ + + {relevantFc ? ( + + ) : ( +
+
{fc.follower_count}
+
+ + Followers
- +
)} )} @@ -136,3 +122,24 @@ export const ProfileHero = () => { ) } +const RelevantFollowers = ({ relevantFc, fc }: { relevantFc: any; fc: any }) => { + const [first, second] = relevantFc + return ( +
+ pfp_url)} + count={fc.follower_count} + /> +
+ Followed by {first.display_name} + {second && ( + <> + ", " + {second.display_name} + + )}{" "} + and {fc.follower_count - Math.min(2, relevantFc.length)} others on Farcaster +
+
+ ) +} From 5970a982cb428e6a67643d635047b350b1cf974c Mon Sep 17 00:00:00 2001 From: Dominik Stumpf Date: Tue, 3 Sep 2024 12:28:30 +0200 Subject: [PATCH 3/9] chore: put revalidate tag on fc profile --- src/app/(marketing)/profile/[username]/page.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/app/(marketing)/profile/[username]/page.tsx b/src/app/(marketing)/profile/[username]/page.tsx index 7884d82bd1..2e0dd3039c 100644 --- a/src/app/(marketing)/profile/[username]/page.tsx +++ b/src/app/(marketing)/profile/[username]/page.tsx @@ -65,7 +65,13 @@ const fetchPublicProfileData = async ({ api ) const farcasterProfiles = await ssrFetcher( - farcasterProfilesRequest + farcasterProfilesRequest, + { + next: { + tags: ["profile"], + revalidate: 3600, + }, + } ) const fcProfile = farcasterProfiles.at(0) const neynarRequest = From 237edce3d9b8b8f8a03bb7bb7e4448339f0a4fef Mon Sep 17 00:00:00 2001 From: valid Date: Tue, 3 Sep 2024 15:21:04 +0200 Subject: [PATCH 4/9] refactor: move logic to ProfileSocialCounters component --- .../profile/_components/ProfileHero.tsx | 95 +--------------- .../_components/ProfileSocialCounters.tsx | 104 ++++++++++++++++++ 2 files changed, 108 insertions(+), 91 deletions(-) create mode 100644 src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx diff --git a/src/app/(marketing)/profile/_components/ProfileHero.tsx b/src/app/(marketing)/profile/_components/ProfileHero.tsx index c1cdbab313..eb993e2088 100644 --- a/src/app/(marketing)/profile/_components/ProfileHero.tsx +++ b/src/app/(marketing)/profile/_components/ProfileHero.tsx @@ -1,54 +1,21 @@ "use client" - -import FarcasterImage from "@/../static/socialIcons/farcaster.svg" import { CheckMark } from "@/components/CheckMark" import { LayoutContainer } from "@/components/Layout" import { ProfileAvatar } from "@/components/ProfileAvatar" import { Avatar } from "@/components/ui/Avatar" -import { AvatarGroup } from "@/components/ui/AvatarGroup" import { Button } from "@/components/ui/Button" import { Card } from "@/components/ui/Card" -import { Separator } from "@/components/ui/Separator" -import { FarcasterProfile } from "@guildxyz/types" import { Pencil } from "@phosphor-icons/react" -import useUser from "components/[guild]/hooks/useUser" -import useSWRImmutable from "swr/immutable" import { ProfileOwnerGuard } from "../_components/ProfileOwnerGuard" import { useProfile } from "../_hooks/useProfile" -import { useReferredUsers } from "../_hooks/useReferredUsers" import { EditProfile } from "./EditProfile/EditProfile" import { ProfileHeroSkeleton } from "./ProfileSkeleton" - -const useProfileFarcaster = () => { - const { data: profile } = useProfile() - const user = useUser(profile?.userId) - const userFcProfile = user.farcasterProfiles?.at(0) - const fcProfile = useSWRImmutable( - profile?.userId ? `/v2/users/${profile.userId}/farcaster-profiles` : null - ).data?.at(0) - const followers = useSWRImmutable( - fcProfile - ? `https://api.neynar.com/v2/farcaster/user/bulk?api_key=NEYNAR_API_DOCS&fids=${fcProfile.fid}` - : null - ) - const relevantFollowers = useSWRImmutable( - fcProfile && userFcProfile - ? `https://api.neynar.com/v2/farcaster/followers/relevant?api_key=NEYNAR_API_DOCS&target_fid=${fcProfile.fid}&viewer_fid=${userFcProfile.fid}` - : null - ) - return { followers, relevantFollowers } -} +import { ProfileSocialCounters } from "./ProfileSocialCounters" export const ProfileHero = () => { const { data: profile } = useProfile() - const { data: referredUsers } = useReferredUsers() - const profileFarcaster = useProfileFarcaster() - const fc = profileFarcaster.followers.data?.users.at(0) - const relevantFc = - profileFarcaster.relevantFollowers.data?.top_relevant_followers_hydrated?.map( - ({ user }) => user - ) - if (!profile || !referredUsers) return + + if (!profile) return return ( @@ -84,62 +51,8 @@ export const ProfileHero = () => {

{profile.bio}

-
-
-
{referredUsers.length}
-
Guildmates
-
- {fc && ( - <> - -
-
{fc.following_count}
-
- - Following -
-
- - - {relevantFc ? ( - - ) : ( -
-
{fc.follower_count}
-
- - Followers -
-
- )} - - )} -
+
) } -const RelevantFollowers = ({ relevantFc, fc }: { relevantFc: any; fc: any }) => { - const [first, second] = relevantFc - return ( -
- pfp_url)} - count={fc.follower_count} - /> -
- Followed by {first.display_name} - {second && ( - <> - ", " - {second.display_name} - - )}{" "} - and {fc.follower_count - Math.min(2, relevantFc.length)} others on Farcaster -
-
- ) -} diff --git a/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx b/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx new file mode 100644 index 0000000000..8e16b3d25e --- /dev/null +++ b/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx @@ -0,0 +1,104 @@ +import FarcasterImage from "@/../static/socialIcons/farcaster.svg" +import { AvatarGroup } from "@/components/ui/AvatarGroup" +import { Separator } from "@/components/ui/Separator" +import { cn } from "@/lib/utils" +import { FarcasterProfile } from "@guildxyz/types" +import useUser from "components/[guild]/hooks/useUser" +import useSWRImmutable from "swr/immutable" +import { useProfile } from "../_hooks/useProfile" +import { useReferredUsers } from "../_hooks/useReferredUsers" + +export const ProfileSocialCounters = ({ className }: any) => { + const { data: referredUsers } = useReferredUsers() + const profileFarcaster = useProfileFarcaster() + + const fc = profileFarcaster.followers.data?.users.at(0) + const relevantFc = + profileFarcaster.relevantFollowers.data?.top_relevant_followers_hydrated?.map( + ({ user }) => user + ) + + return ( +
+
+
{referredUsers.length}
+
Guildmates
+
+ {fc && ( + <> + +
+
{fc.following_count}
+
+ + Following +
+
+ + + {relevantFc ? ( + + ) : ( +
+
{fc.follower_count}
+
+ + Followers +
+
+ )} + + )} +
+ ) +} + +const useProfileFarcaster = () => { + const { data: profile } = useProfile() + const user = useUser(profile?.userId) + const userFcProfile = user.farcasterProfiles?.at(0) + const fcProfile = useSWRImmutable( + profile?.userId ? `/v2/users/${profile.userId}/farcaster-profiles` : null + ).data?.at(0) + const followers = useSWRImmutable( + fcProfile + ? `https://api.neynar.com/v2/farcaster/user/bulk?api_key=NEYNAR_API_DOCS&fids=${fcProfile.fid}` + : null + ) + const relevantFollowers = useSWRImmutable( + fcProfile && userFcProfile + ? `https://api.neynar.com/v2/farcaster/followers/relevant?api_key=NEYNAR_API_DOCS&target_fid=${fcProfile.fid}&viewer_fid=${userFcProfile.fid}` + : null + ) + return { followers, relevantFollowers } +} + +const RelevantFollowers = ({ relevantFc, fc }: { relevantFc: any; fc: any }) => { + const [first, second] = relevantFc + return ( +
+ pfp_url)} + count={fc.follower_count} + /> +
+ Followed by {first.display_name} + {second && ( + <> + ", " + {second.display_name} + + )}{" "} + and {fc.follower_count - Math.min(2, relevantFc.length)} others on Farcaster +
+
+ ) +} From d10ae837c740d11ffa156955da61840bff713fd2 Mon Sep 17 00:00:00 2001 From: valid Date: Tue, 3 Sep 2024 15:30:22 +0200 Subject: [PATCH 5/9] refactor: SocialCountTile --- .../_components/ProfileSocialCounters.tsx | 35 +++++++++---------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx b/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx index 8e16b3d25e..e26c3bc832 100644 --- a/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx +++ b/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx @@ -4,6 +4,7 @@ import { Separator } from "@/components/ui/Separator" import { cn } from "@/lib/utils" import { FarcasterProfile } from "@guildxyz/types" import useUser from "components/[guild]/hooks/useUser" +import { PropsWithChildren } from "react" import useSWRImmutable from "swr/immutable" import { useProfile } from "../_hooks/useProfile" import { useReferredUsers } from "../_hooks/useReferredUsers" @@ -25,20 +26,14 @@ export const ProfileSocialCounters = ({ className }: any) => { className )} > -
-
{referredUsers.length}
-
Guildmates
-
+ Guildmates {fc && ( <> -
-
{fc.following_count}
-
- - Following -
-
+ + + Following + { {relevantFc ? ( ) : ( -
-
{fc.follower_count}
-
- - Followers -
-
+ + + Followers + )} )} @@ -81,6 +73,13 @@ const useProfileFarcaster = () => { return { followers, relevantFollowers } } +const SocialCountTile = ({ count, children }: PropsWithChildren<{ count: any }>) => ( +
+
{count}
+
{children}
+
+) + const RelevantFollowers = ({ relevantFc, fc }: { relevantFc: any; fc: any }) => { const [first, second] = relevantFc return ( From 7e2ab8317b1aabae44a392c37346ccab8c3658b4 Mon Sep 17 00:00:00 2001 From: Dominik Stumpf Date: Tue, 3 Sep 2024 20:37:47 +0200 Subject: [PATCH 6/9] refactor: rename variables and add docs, fallback if referred is not defined --- .../_components/ProfileSocialCounters.tsx | 73 ++++++++++++------- 1 file changed, 47 insertions(+), 26 deletions(-) diff --git a/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx b/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx index e26c3bc832..67a902c247 100644 --- a/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx +++ b/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx @@ -11,13 +11,14 @@ import { useReferredUsers } from "../_hooks/useReferredUsers" export const ProfileSocialCounters = ({ className }: any) => { const { data: referredUsers } = useReferredUsers() - const profileFarcaster = useProfileFarcaster() + const { targetProfileData, relevantFollowers } = useProfileFarcaster() - const fc = profileFarcaster.followers.data?.users.at(0) - const relevantFc = - profileFarcaster.relevantFollowers.data?.top_relevant_followers_hydrated?.map( - ({ user }) => user - ) + if (!referredUsers) return + + const targetFc = targetProfileData.data?.users.at(0) + const relevantFc = relevantFollowers.data?.top_relevant_followers_hydrated?.map( + ({ user }) => user + ) return (
{ )} > Guildmates - {fc && ( + {targetFc && ( <> - + Following @@ -40,9 +41,9 @@ export const ProfileSocialCounters = ({ className }: any) => { className="h-px w-full sm:h-10 sm:w-px md:h-12" /> {relevantFc ? ( - + ) : ( - + Followers @@ -53,24 +54,40 @@ export const ProfileSocialCounters = ({ className }: any) => { ) } +/** + * Uses [neynar API](https://docs.neynar.com) to retrieve farcaster data required by guild profile. + * In the context of this function `target` is the *guild profile* that is observed, and `viewer` is the *guild user* + * that is observing. + * + * @returns + * + * `targetProfileData`: `target` farcaster profile related data. + * + * `relevantFollowers`: farcaster followers that `target` and `viewer` share + * from the context of the `viewer`. + * + * Reference: + * - https://docs.neynar.com/reference/user-bulk + * - https://docs.neynar.com/reference/relevant-followers + * */ const useProfileFarcaster = () => { const { data: profile } = useProfile() - const user = useUser(profile?.userId) - const userFcProfile = user.farcasterProfiles?.at(0) - const fcProfile = useSWRImmutable( + const user = useUser() + const viewerFcProfile = user.farcasterProfiles?.at(0) + const targetFcProfile = useSWRImmutable( profile?.userId ? `/v2/users/${profile.userId}/farcaster-profiles` : null ).data?.at(0) - const followers = useSWRImmutable( - fcProfile - ? `https://api.neynar.com/v2/farcaster/user/bulk?api_key=NEYNAR_API_DOCS&fids=${fcProfile.fid}` + const targetProfileData = useSWRImmutable( + targetFcProfile + ? `https://api.neynar.com/v2/farcaster/user/bulk?api_key=NEYNAR_API_DOCS&fids=${targetFcProfile.fid}` : null ) const relevantFollowers = useSWRImmutable( - fcProfile && userFcProfile - ? `https://api.neynar.com/v2/farcaster/followers/relevant?api_key=NEYNAR_API_DOCS&target_fid=${fcProfile.fid}&viewer_fid=${userFcProfile.fid}` + targetFcProfile && viewerFcProfile + ? `https://api.neynar.com/v2/farcaster/followers/relevant?api_key=NEYNAR_API_DOCS&target_fid=${targetFcProfile.fid}&viewer_fid=${viewerFcProfile.fid}` : null ) - return { followers, relevantFollowers } + return { targetProfileData, relevantFollowers } } const SocialCountTile = ({ count, children }: PropsWithChildren<{ count: any }>) => ( @@ -80,23 +97,27 @@ const SocialCountTile = ({ count, children }: PropsWithChildren<{ count: any }>)
) -const RelevantFollowers = ({ relevantFc, fc }: { relevantFc: any; fc: any }) => { - const [first, second] = relevantFc +const RelevantFollowers = ({ + relevantFc, + targetFc, +}: { relevantFc: any; targetFc: any }) => { + const [firstFc, secondFc] = relevantFc return (
pfp_url)} - count={fc.follower_count} + count={targetFc.follower_count} />
- Followed by {first.display_name} - {second && ( + Followed by {firstFc.display_name} + {secondFc && ( <> ", " - {second.display_name} + {secondFc.display_name} )}{" "} - and {fc.follower_count - Math.min(2, relevantFc.length)} others on Farcaster + and {targetFc.follower_count - Math.min(2, relevantFc.length)} others on + Farcaster
) From ac5c857e1eed61c395cab2486eb03cf7214fe9ee Mon Sep 17 00:00:00 2001 From: valid Date: Tue, 3 Sep 2024 22:15:19 +0200 Subject: [PATCH 7/9] refactor: farcaster hooks --- .../_components/ProfileSocialCounters.tsx | 80 ++++++------------- .../profile/_hooks/useFarcasterProfile.tsx | 35 ++++++++ 2 files changed, 58 insertions(+), 57 deletions(-) create mode 100644 src/app/(marketing)/profile/_hooks/useFarcasterProfile.tsx diff --git a/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx b/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx index 67a902c247..f8346d17a8 100644 --- a/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx +++ b/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx @@ -2,24 +2,22 @@ import FarcasterImage from "@/../static/socialIcons/farcaster.svg" import { AvatarGroup } from "@/components/ui/AvatarGroup" import { Separator } from "@/components/ui/Separator" import { cn } from "@/lib/utils" -import { FarcasterProfile } from "@guildxyz/types" -import useUser from "components/[guild]/hooks/useUser" import { PropsWithChildren } from "react" -import useSWRImmutable from "swr/immutable" +import { + useFarcasterProfile, + useRelevantFarcasterFollowers, +} from "../_hooks/useFarcasterProfile" import { useProfile } from "../_hooks/useProfile" import { useReferredUsers } from "../_hooks/useReferredUsers" export const ProfileSocialCounters = ({ className }: any) => { const { data: referredUsers } = useReferredUsers() - const { targetProfileData, relevantFollowers } = useProfileFarcaster() + const { data: profile } = useProfile() + const { farcasterProfile } = useFarcasterProfile(profile?.userId) + const { relevantFollowers } = useRelevantFarcasterFollowers(farcasterProfile?.fid) if (!referredUsers) return - const targetFc = targetProfileData.data?.users.at(0) - const relevantFc = relevantFollowers.data?.top_relevant_followers_hydrated?.map( - ({ user }) => user - ) - return (
{ )} > Guildmates - {targetFc && ( + {farcasterProfile && ( <> - + Following @@ -40,10 +38,13 @@ export const ProfileSocialCounters = ({ className }: any) => { orientation="horizontal" className="h-px w-full sm:h-10 sm:w-px md:h-12" /> - {relevantFc ? ( - + {relevantFollowers?.length ? ( + ) : ( - + Followers @@ -54,42 +55,6 @@ export const ProfileSocialCounters = ({ className }: any) => { ) } -/** - * Uses [neynar API](https://docs.neynar.com) to retrieve farcaster data required by guild profile. - * In the context of this function `target` is the *guild profile* that is observed, and `viewer` is the *guild user* - * that is observing. - * - * @returns - * - * `targetProfileData`: `target` farcaster profile related data. - * - * `relevantFollowers`: farcaster followers that `target` and `viewer` share - * from the context of the `viewer`. - * - * Reference: - * - https://docs.neynar.com/reference/user-bulk - * - https://docs.neynar.com/reference/relevant-followers - * */ -const useProfileFarcaster = () => { - const { data: profile } = useProfile() - const user = useUser() - const viewerFcProfile = user.farcasterProfiles?.at(0) - const targetFcProfile = useSWRImmutable( - profile?.userId ? `/v2/users/${profile.userId}/farcaster-profiles` : null - ).data?.at(0) - const targetProfileData = useSWRImmutable( - targetFcProfile - ? `https://api.neynar.com/v2/farcaster/user/bulk?api_key=NEYNAR_API_DOCS&fids=${targetFcProfile.fid}` - : null - ) - const relevantFollowers = useSWRImmutable( - targetFcProfile && viewerFcProfile - ? `https://api.neynar.com/v2/farcaster/followers/relevant?api_key=NEYNAR_API_DOCS&target_fid=${targetFcProfile.fid}&viewer_fid=${viewerFcProfile.fid}` - : null - ) - return { targetProfileData, relevantFollowers } -} - const SocialCountTile = ({ count, children }: PropsWithChildren<{ count: any }>) => (
{count}
@@ -98,15 +63,16 @@ const SocialCountTile = ({ count, children }: PropsWithChildren<{ count: any }>) ) const RelevantFollowers = ({ - relevantFc, - targetFc, -}: { relevantFc: any; targetFc: any }) => { - const [firstFc, secondFc] = relevantFc + relevantFollowers, + followerCount, +}: { relevantFollowers: any; followerCount: number }) => { + const [firstFc, secondFc] = relevantFollowers + return (
pfp_url)} - count={targetFc.follower_count} + imageUrls={relevantFollowers.map(({ pfp_url }) => pfp_url)} + count={followerCount} />
Followed by {firstFc.display_name} @@ -116,7 +82,7 @@ const RelevantFollowers = ({ {secondFc.display_name} )}{" "} - and {targetFc.follower_count - Math.min(2, relevantFc.length)} others on + and {followerCount - Math.min(2, relevantFollowers.length)} others on Farcaster
diff --git a/src/app/(marketing)/profile/_hooks/useFarcasterProfile.tsx b/src/app/(marketing)/profile/_hooks/useFarcasterProfile.tsx new file mode 100644 index 0000000000..8c1478061b --- /dev/null +++ b/src/app/(marketing)/profile/_hooks/useFarcasterProfile.tsx @@ -0,0 +1,35 @@ +import { FarcasterProfile } from "@guildxyz/types" +import useUser from "components/[guild]/hooks/useUser" +import useSWRImmutable from "swr/immutable" + +export const useFarcasterProfile = (guildUserId?: number) => { + const linkedFcProfile = useSWRImmutable( + guildUserId ? `/v2/users/${guildUserId}/farcaster-profiles` : null + ).data?.at(0) + + // API reference: https://docs.neynar.com/reference/user-bulk + const { data, ...rest } = useSWRImmutable( + linkedFcProfile + ? `https://api.neynar.com/v2/farcaster/user/bulk?api_key=NEYNAR_API_DOCS&fids=${linkedFcProfile.fid}` + : null + ) + return { farcasterProfile: data?.users.at(0), ...rest } +} + +export const useRelevantFarcasterFollowers = (farcasterId?: number) => { + const currentUser = useUser() + const currentUserFcProfile = currentUser.farcasterProfiles?.at(0) + + // API reference: https://docs.neynar.com/reference/relevant-followers + const { data, ...rest } = useSWRImmutable( + farcasterId && currentUserFcProfile + ? `https://api.neynar.com/v2/farcaster/followers/relevant?api_key=NEYNAR_API_DOCS&target_fid=${farcasterId}&viewer_fid=${currentUserFcProfile.fid}` + : null + ) + return { + relevantFollowers: data?.top_relevant_followers_hydrated?.map( + ({ user }) => user + ), + ...rest, + } +} From 931a202750d06978b553067013b74147774cd40f Mon Sep 17 00:00:00 2001 From: valid Date: Tue, 3 Sep 2024 22:29:08 +0200 Subject: [PATCH 8/9] UI: remove divider on small screens --- .../profile/_components/ProfileSocialCounters.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx b/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx index f8346d17a8..dddadc1522 100644 --- a/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx +++ b/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx @@ -34,10 +34,7 @@ export const ProfileSocialCounters = ({ className }: any) => { Following - + {relevantFollowers?.length ? ( Date: Tue, 3 Sep 2024 22:32:50 +0200 Subject: [PATCH 9/9] adjust referredUsers condition --- .../profile/_components/ProfileSocialCounters.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx b/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx index dddadc1522..8b62abe592 100644 --- a/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx +++ b/src/app/(marketing)/profile/_components/ProfileSocialCounters.tsx @@ -16,8 +16,6 @@ export const ProfileSocialCounters = ({ className }: any) => { const { farcasterProfile } = useFarcasterProfile(profile?.userId) const { relevantFollowers } = useRelevantFarcasterFollowers(farcasterProfile?.fid) - if (!referredUsers) return - return (
{ className )} > - Guildmates + {referredUsers && ( + Guildmates + )} {farcasterProfile && ( <>