feat: add active proposals indicator (#1048)

* feat: add active proposals indicator * fix: render network indicator after avatar * feat: add active proposals indicator on explore page
snapshot-labs · Dec 11, 2024 · a64bab8 · a64bab8
1 parent be5fb73
commit a64bab8
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 12 deletions.
diff --git a/apps/ui/src/components/App/Sidebar.vue b/apps/ui/src/components/App/Sidebar.vue
@@ -32,7 +32,12 @@ const followedSpacesStore = useFollowedSpacesStore();
           class="block"
         >
           <UiTooltip :title="element.name" placement="right">
-            <SpaceAvatar :space="element" :size="32" class="!rounded-[4px]" />
+            <SpaceAvatar
+              show-active-proposals
+              :space="element"
+              :size="32"
+              class="!rounded-[4px]"
+            />
           </UiTooltip>
         </AppLink>
       </template>

diff --git a/apps/ui/src/components/SpaceAvatar.vue b/apps/ui/src/components/SpaceAvatar.vue
@@ -2,25 +2,43 @@
 import { getCacheHash } from '@/helpers/utils';
 import { NetworkID } from '@/types';
 
+defineOptions({ inheritAttrs: false });
+
 const props = withDefaults(
   defineProps<{
-    space: { id: string; avatar: string; network: NetworkID };
+    space: {
+      id: string;
+      avatar: string;
+      network: NetworkID;
+      active_proposals: number | null;
+    };
     size: number;
+    showActiveProposals?: boolean;
   }>(),
   {
-    size: 22
+    size: 22,
+    showActiveProposals: false
   }
 );
 
 const cb = computed(() => getCacheHash(props.space.avatar));
 </script>
 
 <template>
-  <UiStamp
-    :id="`${space.network}:${space.id}`"
-    :size="size"
-    :cb="cb"
-    class="!bg-skin-bg"
-    type="space"
-  />
+  <div class="relative w-fit">
+    <UiStamp
+      v-bind="$attrs"
+      :id="`${space.network}:${space.id}`"
+      :size="size"
+      :cb="cb"
+      class="!bg-skin-bg"
+      type="space"
+    />
+    <div
+      v-if="showActiveProposals && space.active_proposals"
+      class="h-[20px] min-w-[20px] absolute px-1 -bottom-2 -right-2 text-white bg-skin-success rounded-full flex items-center justify-center text-[12px] font-bold border-2 border-skin-bg"
+    >
+      {{ space.active_proposals }}
+    </div>
+  </div>
 </template>
diff --git a/apps/ui/src/components/SpacesListItem.vue b/apps/ui/src/components/SpacesListItem.vue
@@ -29,6 +29,7 @@ const compositeSpaceId = `${props.space.network}:${props.space.id}`;
         class="mb-2"
       >
         <SpaceAvatar
+          show-active-proposals
           :space="space"
           :size="50"
           class="border-skin-bg rounded-md border-[3px]"

diff --git a/apps/ui/src/components/Ui/BadgeNetwork.vue b/apps/ui/src/components/Ui/BadgeNetwork.vue
@@ -55,8 +55,9 @@ const networkData = computed<NetworkData | null>(() => {
 
 <template>
   <div class="relative">
+    <slot />
     <img
-      v-if="networkData"
+      v-if="networkData && size !== 0"
       :src="getUrl(networkData.avatar) ?? undefined"
       :title="networkData.name"
       :style="{
@@ -66,6 +67,5 @@ const networkData = computed<NetworkData | null>(() => {
       :alt="networkData.name"
       class="absolute rounded-full -bottom-1 -right-1 border-2 bg-skin-border border-skin-bg"
     />
-    <slot />
   </div>
 </template>
diff --git a/apps/ui/src/networks/common/graphqlApi/index.ts b/apps/ui/src/networks/common/graphqlApi/index.ts
@@ -200,6 +200,7 @@ function formatSpace(
     discord: space.metadata.discord,
     terms: '',
     voting_power_symbol: space.metadata.voting_power_symbol,
+    active_proposals: null,
     voting_types: constants.EDITOR_VOTING_TYPES,
     treasuries: space.metadata.treasuries.map(treasury =>
       formatMetadataTreasury(treasury)

diff --git a/apps/ui/src/networks/offchain/api/index.ts b/apps/ui/src/networks/offchain/api/index.ts
@@ -121,6 +121,7 @@ function formatSpace(
       cover: space.cover || '',
       proposal_count: space.proposalsCount,
       vote_count: space.votesCount,
+      active_proposals: space.activeProposals,
       turbo: space.turbo,
       verified: space.verified,
       snapshot_chain_id: parseInt(space.network)
@@ -170,6 +171,7 @@ function formatSpace(
     vote_count: space.votesCount,
     follower_count: space.followersCount,
     voting_power_symbol: space.symbol,
+    active_proposals: space.activeProposals,
     voting_delay: space.voting.delay ?? 0,
     voting_types: space.voting.type
       ? [space.voting.type]

diff --git a/apps/ui/src/networks/offchain/api/queries.ts b/apps/ui/src/networks/offchain/api/queries.ts
@@ -17,6 +17,7 @@ const SPACE_FRAGMENT = gql`
     github
     coingecko
     symbol
+    activeProposals
     treasuries {
       name
       network
@@ -68,6 +69,7 @@ const SPACE_FRAGMENT = gql`
       cover
       proposalsCount
       votesCount
+      activeProposals
       turbo
       verified
       network
@@ -79,6 +81,7 @@ const SPACE_FRAGMENT = gql`
       cover
       proposalsCount
       votesCount
+      activeProposals
       turbo
       verified
       network

diff --git a/apps/ui/src/networks/offchain/api/types.ts b/apps/ui/src/networks/offchain/api/types.ts
@@ -13,6 +13,7 @@ export type ApiRelatedSpace = {
   avatar: string;
   cover: string | null;
   proposalsCount: number;
+  activeProposals: number;
   votesCount: number;
   turbo: boolean;
   verified: boolean;
@@ -34,6 +35,7 @@ export type ApiSpace = {
   github: string | null;
   coingecko: string | null;
   symbol: string;
+  activeProposals: number;
   treasuries: {
     name: string;
     network: string;

diff --git a/apps/ui/src/types.ts b/apps/ui/src/types.ts
@@ -120,6 +120,7 @@ export type RelatedSpace = {
   about?: string;
   proposal_count: number;
   vote_count: number;
+  active_proposals: number | null;
   turbo: boolean;
   verified: boolean;
   snapshot_chain_id: number;
@@ -173,6 +174,7 @@ export type Space = {
   coingecko?: string;
   terms: string;
   voting_power_symbol: string;
+  active_proposals: number | null;
   controller: string;
   voting_delay: number;
   voting_types: VoteType[];