feat: add follows count from EFP

apps/ui/src/helpers/efp.ts

@@ -0,0 +1,17 @@
+import { isAddress } from '@ethersproject/address';
+
+const EFP_API_URL = 'https://api.ethfollow.xyz';
+
+export async function getUserStats(
+  addressOrENS: string
+): Promise<{ followers_count: number; following_count: number }> {
+  if (!isAddress(addressOrENS)) return Promise.reject('Invalid address');
+
+  const res = await fetch(`${EFP_API_URL}/api/v1/users/${addressOrENS}/stats`);
+  const stats = await res.json();
+
+  return {
+    followers_count: parseInt(stats.followers_count),
+    following_count: parseInt(stats.following_count)
+  };
+}

apps/ui/src/views/User.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { getUserStats } from '@/helpers/efp';
 import {
   _n,
   _p,
@@ -30,6 +31,13 @@ const loadingActivities = ref(false);
 const modalOpenEditUser = ref(false);
 const loaded = ref(false);
 
+const userMetadata = reactive({
+  loading: false,
+  loaded: false,
+  followers_count: 0,
+  following_count: 0
+});
+
 const id = computed(() => route.params.user as string);
 
 const user = computed(() => usersStore.getUser(id.value));
@@ -38,6 +46,21 @@ const socials = computed(() => getSocialNetworksLink(user.value));
 
 const cb = computed(() => getCacheHash(user.value?.avatar));
 
+async function loadUserMetadata(userId: string) {
+  userMetadata.loading = true;
+
+  try {
+    const userStats = await getUserStats(userId);
+
+    userMetadata.followers_count = userStats.followers_count;
+    userMetadata.following_count = userStats.following_count;
+    userMetadata.loading = false;
+    userMetadata.loaded = true;
+  } catch (e) {
+    userMetadata.loading = false;
+  }
+}
+
 async function loadActivities(userId: string) {
   loadingActivities.value = true;
 
@@ -102,6 +125,7 @@ watch(
 
     await usersStore.fetchUser(userId);
     loadActivities(userId);
+    loadUserMetadata(userId);
 
     loaded.value = true;
   },
@@ -160,6 +184,18 @@ watchEffect(() => setTitle(`${user.value?.name || id.value} user profile`));
               <IH-check v-else class="inline-block" />
             </button>
           </UiTooltip>
+          <span v-if="userMetadata.loaded">
+            ·
+            <a :href="`https://ethfollow.xyz/${user.id}`" target="_blank">
+              {{ _n(userMetadata.following_count) }}
+              <span class="text-skin-text">following</span>
+            </a>
+            ·
+            <a :href="`https://ethfollow.xyz/${user.id}`" target="_blank">
+              {{ _n(userMetadata.followers_count) }}
+              <span class="text-skin-text">followers</span>
+            </a>
+          </span>
         </div>
         <div
           v-if="user.about"