feat: add profile revenue

apps/web/src/components/Profile/Stats/SuperFollowRevenue.tsx

@@ -0,0 +1,76 @@
+import type { FollowRevenueRequest } from '@hey/lens';
+
+import PublicationsShimmer from '@components/Shared/Shimmer/PublicationsShimmer';
+import { CurrencyDollarIcon } from '@heroicons/react/24/outline';
+import { STATIC_IMAGES_URL } from '@hey/data/constants';
+import { useFollowRevenuesQuery } from '@hey/lens';
+import getAllTokens from '@hey/lib/api/getAllTokens';
+import humanize from '@hey/lib/humanize';
+import { Card, CardHeader, ErrorMessage } from '@hey/ui';
+import { useQuery } from '@tanstack/react-query';
+import { type FC } from 'react';
+
+interface SuperFollowRevenueProps {
+  profileId: string;
+}
+
+const SuperFollowRevenue: FC<SuperFollowRevenueProps> = ({ profileId }) => {
+  const request: FollowRevenueRequest = { for: profileId };
+
+  const { data, error, loading } = useFollowRevenuesQuery({
+    skip: !profileId,
+    variables: { request }
+  });
+
+  const {
+    data: allowedTokens,
+    error: allowedTokensError,
+    isLoading: allowedTokensLoading
+  } = useQuery({
+    queryFn: getAllTokens,
+    queryKey: ['getAllTokens']
+  });
+
+  if (loading || allowedTokensLoading) {
+    return <PublicationsShimmer />;
+  }
+
+  if (data?.followRevenues.revenues.length === 0) {
+    return null;
+  }
+
+  if (error || allowedTokensError) {
+    return <ErrorMessage error={error} title="Failed to load profile stats" />;
+  }
+
+  const tokensAvailable = allowedTokens?.map((token) => token.symbol);
+
+  return (
+    <Card>
+      <CardHeader title="Super follow revenue" />
+      <div className="p-5">
+        {data?.followRevenues.revenues.map((revenue, index) => (
+          <div className="flex items-center space-x-2" key={index}>
+            {tokensAvailable?.includes(revenue.total.asset.symbol) ? (
+              <img
+                alt={revenue.total.asset.symbol}
+                className="size-5"
+                src={`${STATIC_IMAGES_URL}/tokens/${revenue.total.asset.symbol}.svg`}
+              />
+            ) : (
+              <CurrencyDollarIcon className="size-5" />
+            )}
+            <div className="text-lg font-bold">{revenue.total.asset.name}</div>
+            <div className="text-sm">
+              {humanize(parseFloat(revenue.total.value))}{' '}
+              {revenue.total.asset.symbol}
+            </div>
+            <div className="text-sm">(${revenue.total.asFiat?.value})</div>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+};
+
+export default SuperFollowRevenue;

apps/web/src/components/Profile/Stats/index.tsx

@@ -0,0 +1,13 @@
+import { type FC } from 'react';
+
+import SuperFollowRevenue from './SuperFollowRevenue';
+
+interface StatsProps {
+  profileId: string;
+}
+
+const Stats: FC<StatsProps> = ({ profileId }) => {
+  return <SuperFollowRevenue profileId={profileId} />;
+};
+
+export default Stats;

apps/web/src/components/Profile/index.tsx

@@ -32,6 +32,7 @@ import Followers from './Followers';
 import Following from './Following';
 import MutualFollowersList from './MutualFollowers/List';
 import ProfilePageShimmer from './Shimmer';
+import Stats from './Stats';
 
 const ViewProfile: NextPage = () => {
   const {
@@ -67,7 +68,8 @@ const ViewProfile: NextPage = () => {
     ProfileFeedType.Feed.toLowerCase(),
     ProfileFeedType.Replies.toLowerCase(),
     ProfileFeedType.Media.toLowerCase(),
-    ProfileFeedType.Collects.toLowerCase()
+    ProfileFeedType.Collects.toLowerCase(),
+    ProfileFeedType.Stats.toLowerCase()
   ];
 
   const feedType = type
@@ -174,6 +176,8 @@ const ViewProfile: NextPage = () => {
                   profileId={profile.id}
                   type={feedType}
                 />
+              ) : feedType === ProfileFeedType.Stats ? (
+                <Stats profileId={profile.id} />
               ) : null}
             </>
           )}