feat: load leaderboard data for offchain spaces (#479)

* feat: add leaderboard for offchain spaces * chore: remove unused import * fix: leaderboard votes progress % should be relative to proposal count * fix: fix wrong property names
snapshot-labs · Jul 16, 2024 · b7bf3af · b7bf3af
1 parent 1cc0ed0
commit b7bf3af
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 11 deletions.
diff --git a/apps/ui/src/components/App/Nav.vue b/apps/ui/src/components/App/Nav.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { compareAddresses } from '@/helpers/utils';
-import { offchainNetworks } from '@/networks';
 
 import IHGlobeAlt from '~icons/heroicons-outline/globe-alt';
 import IHNewspaper from '~icons/heroicons-outline/newspaper';
@@ -56,8 +55,7 @@ const navigationConfig = computed<Record<string, Record<string, NavigationItem>>
     },
     leaderboard: {
       name: 'Leaderboard',
-      icon: IHUserGroup,
-      hidden: (space.value && offchainNetworks.includes(space.value.network)) || false
+      icon: IHUserGroup
     },
     ...(space.value?.delegations && space.value.delegations.length > 0
       ? {

diff --git a/apps/ui/src/networks/offchain/api/index.ts b/apps/ui/src/networks/offchain/api/index.ts
@@ -9,7 +9,8 @@ import {
   USER_FOLLOWS_QUERY,
   VOTES_QUERY,
   ALIASES_QUERY,
-  USER_QUERY
+  USER_QUERY,
+  LEADERBOARD_QUERY
 } from './queries';
 import { PaginationOpts, SpacesFilter, NetworkApi, ProposalsFilter } from '@/networks/types';
 import { getNames } from '@/helpers/stamp';
@@ -421,13 +422,63 @@ export function createApi(uri: string, networkId: NetworkID): NetworkApi {
         farcaster: user.farcaster || ''
       };
     },
-    loadUserActivities: async (): Promise<UserActivity[]> => {
-      // NOTE: leaderboard implementation is pending on offchain
-      return [];
+    loadUserActivities(userId: string): Promise<UserActivity[]> {
+      return apollo
+        .query({
+          query: LEADERBOARD_QUERY,
+          variables: {
+            first: 1000,
+            skip: 0,
+            orderBy: 'proposal_count',
+            orderDirection: 'desc',
+            where: {
+              user: userId
+            }
+          }
+        })
+        .then(({ data }) =>
+          data.leaderboards.map((leaderboard: any) => ({
+            spaceId: `${networkId}:${leaderboard.space}`,
+            vote_count: leaderboard.votesCount,
+            proposal_count: leaderboard.proposalsCount
+          }))
+        );
     },
-    loadLeaderboard: async (): Promise<UserActivity[]> => {
-      // NOTE: leaderboard implementation is pending on offchain
-      return [];
+    loadLeaderboard(
+      spaceId: string,
+      { limit, skip = 0 }: PaginationOpts,
+      sortBy:
+        | 'vote_count-desc'
+        | 'vote_count-asc'
+        | 'proposal_count-desc'
+        | 'proposal_count-asc' = 'vote_count-desc'
+    ): Promise<UserActivity[]> {
+      const [orderBy, orderDirection] = sortBy.split('-') as [
+        'vote_count' | 'proposal_count',
+        'desc' | 'asc'
+      ];
+
+      return apollo
+        .query({
+          query: LEADERBOARD_QUERY,
+          variables: {
+            first: limit,
+            skip,
+            orderBy,
+            orderDirection,
+            where: {
+              space: spaceId
+            }
+          }
+        })
+        .then(({ data }) =>
+          data.leaderboards.map((leaderboard: any) => ({
+            id: leaderboard.user,
+            spaceId: leaderboard.space,
+            vote_count: leaderboard.votesCount,
+            proposal_count: leaderboard.proposalsCount
+          }))
+        );
     },
     loadFollows: async (userId?: string, spaceId?: string): Promise<Follow[]> => {
       const {

diff --git a/apps/ui/src/networks/offchain/api/queries.ts b/apps/ui/src/networks/offchain/api/queries.ts
@@ -219,3 +219,26 @@ export const USER_QUERY = gql`
     }
   }
 `;
+
+export const LEADERBOARD_QUERY = gql`
+  query (
+    $first: Int!
+    $skip: Int!
+    $orderBy: String
+    $orderDirection: OrderDirection!
+    $where: LeaderboardsWhere
+  ) {
+    leaderboards(
+      first: $first
+      skip: $skip
+      orderBy: $orderBy
+      orderDirection: $orderDirection
+      where: $where
+    ) {
+      user
+      space
+      proposalsCount
+      votesCount
+    }
+  }
+`;
diff --git a/apps/ui/src/views/Space/Leaderboard.vue b/apps/ui/src/views/Space/Leaderboard.vue
@@ -167,7 +167,7 @@ watchEffect(() => setTitle(`Leaderboard - ${props.space.name}`));
         >
           <h4 class="text-skin-link" v-text="_n(user.vote_count)" />
           <div class="text-[17px]">
-            {{ _p(user.vote_count / space.vote_count) }}
+            {{ _p(user.vote_count / space.proposal_count) }}
           </div>
         </div>
       </div>