Merge pull request #161 from us3r-network/F-profileIntegratedWeb3bio-…

…shixuewen

feat: profile integrated web3bio

apps/u3/src/api/web3bio.ts

@@ -0,0 +1,34 @@
+import axios, { AxiosPromise } from 'axios';
+
+export enum Web3BioProfilePlatform {
+  ens = 'ENS',
+  lens = 'lens',
+  farcaster = 'farcaster',
+  dotbit = 'dotbit',
+}
+export type Web3BioProfile = {
+  address: string | null;
+  identity: string;
+  platform: string;
+  displayName: string | null;
+  avatar: string | null;
+  email: string | null;
+  description: string | null;
+  location: string | null;
+  header: string | null;
+  links: {
+    website: {
+      link: string;
+      handle: string;
+    };
+  };
+};
+
+export const getProfilesWithWeb3Bio = (
+  identity: string
+): AxiosPromise<Array<Web3BioProfile>> => {
+  return axios.request({
+    url: `https://api.web3.bio/profile/${identity}`,
+    method: 'GET',
+  });
+};

apps/u3/src/components/profile/profile-info/HasProfileInfoCard.tsx

@@ -0,0 +1,103 @@
+import { StyledComponentPropsWithRef } from 'styled-components';
+import { useEffect, useMemo } from 'react';
+import { useProfilesOwnedBy } from '@lens-protocol/react-web';
+
+import { PlatformAccountsData } from './PlatformAccounts';
+import { getAddressWithDidPkh } from '../../../utils/did';
+import getAvatar from '../../../utils/lens/getAvatar';
+import { SocailPlatform } from '../../../api';
+import { useFarcasterCtx } from '../../../contexts/FarcasterCtx';
+import useFarcasterUserData from '../../../hooks/farcaster/useFarcasterUserData';
+import useUpsertFarcasterUserData from '../../../hooks/farcaster/useUpsertFarcasterUserData';
+import useFarcasterFollowNum from '../../../hooks/farcaster/useFarcasterFollowNum';
+import useBioLinkListWithDid from '../../../hooks/profile/useBioLinkListWithDid';
+import ProfileInfoBaseCard from './ProfileInfoBaseCard';
+
+interface HasU3ProfileInfoCardProps extends StyledComponentPropsWithRef<'div'> {
+  did: string;
+  clickFollowing?: () => void;
+  clickFollowers?: () => void;
+}
+export default function HasU3ProfileInfoCard({
+  did,
+  clickFollowing,
+  clickFollowers,
+  ...wrapperProps
+}: HasU3ProfileInfoCardProps) {
+  const { lensBioLinkProfiles, fcastBioLinkProfiles } =
+    useBioLinkListWithDid(did);
+
+  const { farcasterUserData } = useFarcasterCtx();
+
+  const address = getAddressWithDidPkh(did);
+
+  const { data: lensProfiles } = useProfilesOwnedBy({
+    address: lensBioLinkProfiles?.[0]?.ownedBy || '',
+  });
+  const lensProfileFirst = lensProfiles?.[0];
+
+  const fid = fcastBioLinkProfiles?.[0]?.fid;
+  const { upsertFarcasterUserData } = useUpsertFarcasterUserData();
+  useEffect(() => {
+    if (fid && !farcasterUserData[fid]) {
+      upsertFarcasterUserData({ fid });
+    }
+  }, [fid, farcasterUserData]);
+
+  const { farcasterFollowData } = useFarcasterFollowNum(fid);
+
+  const userData = useFarcasterUserData({
+    fid: `${fid}`,
+    farcasterUserData,
+  });
+
+  const platformAccounts: PlatformAccountsData = useMemo(() => {
+    const accounts = [];
+    if (lensProfiles?.length > 0) {
+      for (const lensProfile of lensProfiles) {
+        accounts.push({
+          platform: SocailPlatform.Lens,
+          avatar: getAvatar(lensProfile),
+          name: lensProfile.name,
+          handle: lensProfile.handle,
+        });
+      }
+    }
+
+    if (userData?.fid) {
+      accounts.push({
+        platform: SocailPlatform.Farcaster,
+        avatar: userData.pfp,
+        name: userData.userName,
+        handle: userData.display,
+      });
+    }
+    return accounts;
+  }, [lensProfiles, userData]);
+
+  const followersCount = useMemo(() => {
+    const lensFollowersCount = lensProfileFirst?.stats.totalFollowers || 0;
+
+    return lensFollowersCount + farcasterFollowData.followers;
+  }, [lensProfileFirst, farcasterFollowData]);
+
+  const followingCount = useMemo(() => {
+    const lensFollowersCount = lensProfileFirst?.stats.totalFollowing || 0;
+
+    return lensFollowersCount + farcasterFollowData.following;
+  }, [lensProfileFirst, farcasterFollowData]);
+
+  return (
+    <ProfileInfoBaseCard
+      did={did}
+      address={address}
+      platformAccounts={platformAccounts}
+      followersCount={followersCount}
+      followingCount={followingCount}
+      lensProfiles={lensProfiles}
+      clickFollowing={clickFollowing}
+      clickFollowers={clickFollowers}
+      {...wrapperProps}
+    />
+  );
+}

apps/u3/src/components/profile/profile-info/NoProfileInfoCard.tsx

@@ -0,0 +1,97 @@
+import { StyledComponentPropsWithRef } from 'styled-components';
+import { useEffect, useMemo } from 'react';
+import { useProfilesOwnedBy } from '@lens-protocol/react-web';
+import { PlatformAccountsData } from './PlatformAccounts';
+import { SocailPlatform } from '../../../api';
+import { useFarcasterCtx } from '../../../contexts/FarcasterCtx';
+import useUpsertFarcasterUserData from '../../../hooks/farcaster/useUpsertFarcasterUserData';
+import useFarcasterFollowNum from '../../../hooks/farcaster/useFarcasterFollowNum';
+import useBioLinkListWithWeb3Bio from '../../../hooks/profile/useBioLinkListWithWeb3Bio';
+import { getDidPkhWithAddress } from '../../../utils/did';
+import ProfileInfoBaseCard from './ProfileInfoBaseCard';
+import getAvatar from '../../../utils/lens/getAvatar';
+
+interface NoU3ProfileInfoCardProps extends StyledComponentPropsWithRef<'div'> {
+  identity: string;
+  clickFollowing?: () => void;
+  clickFollowers?: () => void;
+}
+export default function NoU3ProfileInfoCard({
+  identity,
+  clickFollowing,
+  clickFollowers,
+  ...wrapperProps
+}: NoU3ProfileInfoCardProps) {
+  const { bioLinkList, lensBioLinks, fcastBioLinks } =
+    useBioLinkListWithWeb3Bio(identity);
+  const { farcasterUserData } = useFarcasterCtx();
+
+  const address = bioLinkList.find((item) => !!item.address)?.address;
+  const did = getDidPkhWithAddress(address);
+
+  const { data: lensProfiles } = useProfilesOwnedBy({
+    address: lensBioLinks?.[0]?.address || '',
+  });
+  const lensProfileFirst = lensProfiles?.[0];
+
+  // TODO 根据 address 获取fid
+  const fid = '';
+  const { upsertFarcasterUserData } = useUpsertFarcasterUserData();
+  useEffect(() => {
+    if (fid && !farcasterUserData[fid]) {
+      upsertFarcasterUserData({ fid });
+    }
+  }, [fid, farcasterUserData]);
+
+  const { farcasterFollowData } = useFarcasterFollowNum(fid);
+
+  const platformAccounts: PlatformAccountsData = useMemo(() => {
+    const accounts = [];
+    if (lensProfiles?.length > 0) {
+      for (const lensProfile of lensProfiles) {
+        accounts.push({
+          platform: SocailPlatform.Lens,
+          avatar: getAvatar(lensProfile),
+          name: lensProfile.name,
+          handle: lensProfile.handle,
+        });
+      }
+    }
+
+    for (const fcastProfile of fcastBioLinks) {
+      accounts.push({
+        platform: SocailPlatform.Farcaster,
+        avatar: fcastProfile.avatar,
+        name: fcastProfile.displayName,
+        handle: fcastProfile.identity,
+      });
+    }
+    return accounts;
+  }, [lensProfiles, fcastBioLinks]);
+
+  const followersCount = useMemo(() => {
+    const lensFollowersCount = lensProfileFirst?.stats.totalFollowers || 0;
+
+    return lensFollowersCount + farcasterFollowData.followers;
+  }, [lensProfileFirst, farcasterFollowData]);
+
+  const followingCount = useMemo(() => {
+    const lensFollowersCount = lensProfileFirst?.stats.totalFollowing || 0;
+
+    return lensFollowersCount + farcasterFollowData.following;
+  }, [lensProfileFirst, farcasterFollowData]);
+
+  return (
+    <ProfileInfoBaseCard
+      did={did}
+      address={address}
+      platformAccounts={platformAccounts}
+      followersCount={followersCount}
+      followingCount={followingCount}
+      lensProfiles={lensProfiles}
+      clickFollowing={clickFollowing}
+      clickFollowers={clickFollowers}
+      {...wrapperProps}
+    />
+  );
+}