feat: load delegate stats

src/components/SpaceDelegatesCard.vue

@@ -3,18 +3,16 @@ import { explorerUrl } from '@/helpers/utils';
 import {
   DelegateWithPercent,
   Profile,
-  ExtendedSpace,
-  DelegatesVote,
-  DelegatesProposal
+  ExtendedSpace
 } from '@/helpers/interfaces';
 
 const props = defineProps<{
   delegate: DelegateWithPercent;
   profiles: Record<string, Profile>;
   space: ExtendedSpace;
   stats?: {
-    votes: DelegatesVote[];
-    proposals: DelegatesProposal[];
+    votes: number;
+    proposals: number;
   };
   about?: string;
 }>();
@@ -134,12 +132,12 @@ function handleDropdownAction(action: string) {
 
     <div class="mt-3 flex gap-[6px]">
       <div>
-        {{ formatCompactNumber(stats?.votes.length || 0) }}
+        {{ formatCompactNumber(stats?.votes || 0) }}
         votes
       </div>
       ·
       <div>
-        {{ formatCompactNumber(stats?.proposals.length || 0) }}
+        {{ formatCompactNumber(stats?.proposals || 0) }}
         proposals
       </div>
     </div>

src/composables/useDelegates.ts

@@ -1,25 +1,19 @@
+import { LEADERBOARD_QUERY } from '@/helpers/queries';
 import { getInstance } from '@snapshot-labs/lock/plugins/vue3';
-import {
-  DelegateWithPercent,
-  DelegatesVote,
-  DelegatesProposal,
-  ExtendedSpace
-} from '@/helpers/interfaces';
+import { DelegateWithPercent, ExtendedSpace } from '@/helpers/interfaces';
 import {
   DelegationTypes,
   setupDelegation as getDelegationAdapter
 } from '@/helpers/delegationV2';
 
-type DelegatesStats = Record<
-  string,
-  { votes: DelegatesVote[]; proposals: DelegatesProposal[] }
->;
+type DelegatesStats = Record<string, { votes: number; proposals: number }>;
 
 const DELEGATES_LIMIT = 18;
 
 export function useDelegates(space: ExtendedSpace) {
   const auth = getInstance();
   const { resolveName } = useResolveName();
+  const { apolloQuery } = useApolloQuery();
 
   const { reader, writer } = getDelegationAdapter(space, auth);
 
@@ -54,6 +48,7 @@ export function useDelegates(space: ExtendedSpace) {
     try {
       const response = await fetchDelegateBatch(orderBy);
       delegates.value = response;
+      loadStats(response.map(d => d.id));
       hasMoreDelegates.value = response.length === DELEGATES_LIMIT;
     } catch (e) {
       console.error(e);
@@ -73,6 +68,7 @@ export function useDelegates(space: ExtendedSpace) {
         orderBy,
         delegates.value.length
       );
+      loadStats(response.map(d => d.id));
       delegates.value = [...delegates.value, ...response];
       hasMoreDelegates.value = response.length === DELEGATES_LIMIT;
     } catch (e) {
@@ -93,6 +89,7 @@ export function useDelegates(space: ExtendedSpace) {
       const resolvedAddress = await resolveName(addressOrEns);
       if (!resolvedAddress) return;
       const response = await reader.getDelegate(resolvedAddress);
+      loadStats([response.id]);
       delegate.value = response;
     } catch (e) {
       console.error(e);
@@ -140,6 +137,26 @@ export function useDelegates(space: ExtendedSpace) {
     }
   }
 
+  async function loadStats(addresses: string[]) {
+    const leaderboards = await apolloQuery(
+      {
+        query: LEADERBOARD_QUERY,
+        variables: {
+          space: space.id,
+          user_in: addresses
+        }
+      },
+      'leaderboards'
+    );
+
+    leaderboards.forEach(leaderboard => {
+      delegatesStats.value[leaderboard.user] = {
+        votes: leaderboard.votesCount,
+        proposals: leaderboard.proposalsCount
+      };
+    });
+  }
+
   return {
     isLoadingDelegate,
     isLoadingDelegates,

src/helpers/queries.ts

@@ -529,3 +529,15 @@ export const SPACE_QUERY = gql`
     }
   }
 `;
+
+export const LEADERBOARD_QUERY = gql`
+  query Leaderboard($space: String!, $user_in: [String]) {
+    leaderboards(where: { space: $space, user_in: $user_in }) {
+      space
+      user
+      proposalsCount
+      votesCount
+      lastVote
+    }
+  }
+`;

src/views/SpaceDelegate.vue

@@ -4,6 +4,7 @@ import { useConfirmDialog } from '@vueuse/core';
 import { clone } from '@snapshot-labs/snapshot.js/src/utils';
 import { DelegatingTo } from '../helpers/delegationV2/types';
 import { DelegationTypes } from '@/helpers/delegationV2';
+import { getAddress } from '@ethersproject/address';
 
 const INITIAL_STATEMENT = {
   about: '',
@@ -67,7 +68,7 @@ const showUndelegate = computed(() => {
 });
 
 const delegateStats = computed(() => {
-  return delegatesStats.value?.[address.value];
+  return delegatesStats.value?.[getAddress(address.value)];
 });
 
 const delegatorItems = computed(() => {
@@ -88,12 +89,12 @@ const delegatorItems = computed(() => {
     },
     {
       label: 'Proposals',
-      value: formatCompactNumber(delegateStats.value?.proposals.length || 0),
+      value: formatCompactNumber(delegateStats.value?.proposals || 0),
       tooltip: null
     },
     {
       label: 'Votes',
-      value: formatCompactNumber(delegateStats.value?.votes.length || 0),
+      value: formatCompactNumber(delegateStats.value?.votes || 0),
       tooltip: null
     }
   ];