Add Ethereum Follow Protocol Stats

apps/web/public/csp.json

@@ -100,6 +100,7 @@
     "https://x6ahx1oagk.execute-api.us-east-2.amazonaws.com",
     "https://mainnet.era.zksync.io/",
     "https://8mr3mthjba.execute-api.us-east-2.amazonaws.com",
+    "https://api.ethfollow.xyz/api/v1/",
     "wss://*.uniswap.org",
     "wss://relay.walletconnect.com",
     "wss://relay.walletconnect.org",

apps/web/src/components/AccountDrawer/Stats.tsx

@@ -0,0 +1,37 @@
+import { LoadingBubble } from 'components/Tokens/loading'
+import useEFPStats from 'hooks/useEFPStats'
+import { Link } from 'react-router-dom'
+import { Flex, Text } from 'ui/src'
+
+export default function Stats({ account }: { account: string }) {
+  const { stats, isLoading, getStatLink } = useEFPStats(account)
+
+  return (
+    <Flex row gap="$spacing6">
+      <Link style={{ textDecoration: 'none' }} to={getStatLink('following')} target="_blank">
+        <Flex row gap="$spacing6" alignItems="center" hoverStyle={{ opacity: 0.7 }}>
+          <Text variant="body4" color="neutral2">
+            Following
+          </Text>
+          {isLoading ? (
+            <LoadingBubble width="22px" height="12px" />
+          ) : (
+            <Text variant="body4">{stats?.following_count ?? '-'}</Text>
+          )}
+        </Flex>
+      </Link>
+      <Link style={{ textDecoration: 'none' }} to={getStatLink('followers')} target="_blank">
+        <Flex row gap="$spacing6" alignItems="center" hoverStyle={{ opacity: 0.7 }}>
+          <Text variant="body4" color="neutral2">
+            Followers
+          </Text>
+          {isLoading ? (
+            <LoadingBubble width="22px" height="12px" />
+          ) : (
+            <Text variant="body4">{stats?.followers_count ?? '-'}</Text>
+          )}
+        </Flex>
+      </Link>
+    </Flex>
+  )
+}

apps/web/src/components/AccountDrawer/Status.tsx

@@ -1,4 +1,5 @@
 import { AddressDisplay } from 'components/AccountDetails/AddressDisplay'
+import Stats from 'components/AccountDrawer/Stats'
 import StatusIcon from 'components/Identicon/StatusIcon'
 import styled from 'lib/styled-components'
 import { CopyHelper, ThemedText } from 'theme/components'
@@ -45,6 +46,7 @@ export function Status({
             </Text>
           </CopyHelper>
         )}
+        <Stats account={account} />
       </Identifiers>
     </Container>
   )

apps/web/src/hooks/useEFPStats.ts

@@ -0,0 +1,27 @@
+import { useCallback, useEffect, useState } from 'react'
+import { StatsResponse, fetchEFPStats } from 'utils/fetchEFPStats'
+
+export default function useEFPStats(nameOrAddress: string | Address) {
+  const [stats, setStats] = useState<StatsResponse | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+
+  const fetchStats = useCallback(async () => {
+    const fetchedStats = await fetchEFPStats(nameOrAddress)
+    setStats(fetchedStats)
+    setIsLoading(false)
+  }, [nameOrAddress])
+
+  useEffect(() => {
+    setIsLoading(true)
+    fetchStats()
+  }, [fetchStats])
+
+  const getStatLink = useCallback(
+    (stat: string) => {
+      return `https://ethfollow.xyz/${nameOrAddress}?tab=${stat}`
+    },
+    [nameOrAddress],
+  )
+
+  return { stats, isLoading, getStatLink }
+}

apps/web/src/utils/fetchEFPStats.ts

@@ -0,0 +1,26 @@
+import { Address } from 'viem'
+
+export type StatsResponse = {
+  followers_count: number
+  following_count: number
+}
+
+export async function fetchEFPStats(nameOrAddress: string | Address) {
+  const EFP_API_URL = 'https://api.ethfollow.xyz/api/v1'
+  const url = `${EFP_API_URL}/users/${nameOrAddress}/stats?cache=fresh`
+
+  try {
+    const response = await fetch(url, {
+      method: 'GET',
+      cache: 'default',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+    })
+    const data = (await response.json()) as StatsResponse
+    return data
+  } catch (error) {
+    return null
+  }
+}