feat: add votes page

src/components/ExecutionButton.vue

@@ -27,7 +27,7 @@ const emit = defineEmits<{
 <style scoped lang="scss">
 .button {
   &:disabled {
-    color: var(--border-color) !important;
+    color: rgb(var(--border-color)) !important;
     cursor: not-allowed;
   }
 }

src/components/Modal/Votes.vue

@@ -2,13 +2,12 @@
 import { getNetwork } from '@/networks';
 import { shortenAddress } from '@/helpers/utils';
 import { CHOICES } from '@/helpers/constants';
-import { NetworkID, Proposal as ProposalType, Vote } from '@/types';
+import { Proposal as ProposalType, Vote } from '@/types';
 
 const LIMIT = 20;
 
 const props = defineProps<{
   open: boolean;
-  networkId: NetworkID;
   proposal: ProposalType;
 }>();
 

src/components/NftPreview.vue

@@ -19,7 +19,7 @@ function handleError(e) {
 <template>
   <img
     :src="url"
-    class="aspect-square rounded bg-[color:var(--border-color)]"
+    class="aspect-square rounded bg-skin-border"
     :style="
       size
         ? {

src/components/Proposal.vue

@@ -25,7 +25,7 @@ async function handleVoteClick(choice: Choice) {
       <div class="flex-auto">
         <router-link
           :to="{
-            name: 'proposal',
+            name: 'proposal-overview',
             params: {
               id: proposal.proposal_id,
               space: `${route.params.id}`

src/components/Stamp.vue

@@ -20,7 +20,7 @@ withDefaults(
 <template>
   <img
     :src="getStampUrl(type, id, width && height ? { width, height } : size, cb)"
-    class="rounded-full inline-block bg-[color:var(--border-color)]"
+    class="rounded-full inline-block bg-skin-border"
     :style="
       !width && !height
         ? {

src/components/Ui/Modal.vue

@@ -72,7 +72,7 @@ watch(open, (val, prev) => {
   }
 
   .shell {
-    border: 1px solid var(--border-color);
+    border: 1px solid rgb(var(--border-color));
     background-color: var(--bg-color);
     padding-left: 0 !important;
     padding-right: 0 !important;

src/components/Ui/Select.vue

@@ -1,44 +1,46 @@
-<script setup lang="ts">
-type Item = {
-  key: string;
+<script setup lang="ts" generic="T extends string | number, U extends readonly Item<T>[]">
+export type Item<T extends string | number> = {
+  key: T;
   label: string;
   indicator?: string;
 };
 
 const props = defineProps<{
-  modelValue: string;
-  items: Item[];
+  modelValue: U[number]['key'];
+  title: string;
+  items: U;
   gap?: string;
   placement?: 'left' | 'right';
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void;
+  (e: 'update:modelValue', value: U[number]['key']): void;
 }>();
 
 const currentItem = computed(() => props.items.find(item => item.key === props.modelValue));
+const items = computed(() => props.items);
 </script>
 
 <template>
   <UiDropdown :gap="gap" :placement="placement">
     <template #button>
-      <button
-        class="flex items-center gap-2 relative rounded-full leading-[100%] border button px-[16px] min-w-[76px] h-[42px] top-1 outline-0 text-skin-link bg-skin-bg"
-      >
-        <div class="absolute top-[-10px] bg-skin-bg px-1 left-[12px] text-[16px] text-skin-text">
-          Status
-        </div>
-        <template v-if="currentItem">
-          <div
-            v-if="currentItem.indicator"
-            class="w-[8px] h-[8px] rounded-full"
-            :class="{
-              [currentItem.indicator]: true
-            }"
-          />
-          {{ currentItem.label }}
-        </template>
-      </button>
+      <slot name="button">
+        <button
+          class="flex items-center gap-2 relative rounded-full leading-[100%] border button px-[16px] min-w-[76px] h-[42px] top-1 outline-0 text-skin-link bg-skin-bg"
+        >
+          <div class="absolute top-[-10px] bg-skin-bg px-1 left-[12px] text-[16px] text-skin-text">
+            {{ title }}
+          </div>
+          <template v-if="currentItem">
+            <div
+              v-if="currentItem.indicator"
+              class="w-[8px] h-[8px] rounded-full"
+              :class="currentItem.indicator"
+            />
+            {{ currentItem.label }}
+          </template>
+        </button>
+      </slot>
     </template>
     <template #items>
       <UiDropdownItem v-for="item in items" :key="item.key" v-slot="{ active, disabled }">
@@ -47,13 +49,7 @@ const currentItem = computed(() => props.items.find(item => item.key === props.m
           :class="{ 'opacity-80': active, 'opacity-40': disabled }"
           @click="() => emit('update:modelValue', item.key)"
         >
-          <div
-            v-if="item.indicator"
-            class="w-[8px] h-[8px] rounded-full"
-            :class="{
-              [item.indicator]: true
-            }"
-          />
+          <div v-if="item.indicator" class="w-[8px] h-[8px] rounded-full" :class="item.indicator" />
           {{ item.label }}
         </button>
       </UiDropdownItem>

src/helpers/utils.ts

@@ -155,9 +155,9 @@ export function _d(s: number) {
     .trim();
 }
 
-export function _t(number) {
+export function _t(number, format = 'MMM D, YYYY · h:mm A') {
   try {
-    return dayjs(number * 1e3).format('MMM D, YYYY · h:mm A');
+    return dayjs(number * 1e3).format(format);
   } catch (e) {
     console.log(e);
     return '';

src/networks/common/graphqlApi/index.ts

@@ -61,6 +61,7 @@ function formatProposal(proposal: ApiProposal, networkId: NetworkID, current: nu
     ...proposal,
     space: {
       id: proposal.space.id,
+      name: proposal.space.metadata.name,
       avatar: proposal.space.metadata.avatar,
       controller: proposal.space.controller,
       authenticators: proposal.space.authenticators,
@@ -105,15 +106,33 @@ export function createApi(uri: string, networkId: NetworkID): NetworkApi {
   return {
     loadProposalVotes: async (
       proposal: Proposal,
-      { limit, skip = 0 }: PaginationOpts
+      { limit, skip = 0 }: PaginationOpts,
+      filter: 'any' | 'for' | 'against' | 'abstain' = 'any',
+      sortBy: 'vp-desc' | 'vp-asc' | 'created-desc' | 'created-asc' = 'vp-desc'
     ): Promise<Vote[]> => {
+      const filters: Record<string, any> = {};
+      if (filter === 'for') {
+        filters.choice = 1;
+      } else if (filter === 'against') {
+        filters.choice = 2;
+      } else if (filter === 'abstain') {
+        filters.choice = 3;
+      }
+
+      const [orderBy, orderDirection] = sortBy.split('-');
+
       const { data } = await apollo.query({
         query: VOTES_QUERY,
         variables: {
-          space: proposal.space.id,
-          proposal: proposal.proposal_id,
           first: limit,
-          skip
+          skip,
+          orderBy,
+          orderDirection,
+          where: {
+            space: proposal.space.id,
+            proposal: proposal.proposal_id,
+            ...filters
+          }
         }
       });
 

src/networks/common/graphqlApi/queries.ts

@@ -54,6 +54,7 @@ const PROPOSAL_FRAGMENT = gql`
       authenticators
       metadata {
         id
+        name
         avatar
         voting_power_symbol
         executors
@@ -149,13 +150,19 @@ export const PROPOSALS_SUMMARY_QUERY = gql`
 `;
 
 export const VOTES_QUERY = gql`
-  query ($first: Int!, $skip: Int!, $space: String, $proposal: Int) {
+  query (
+    $first: Int!
+    $skip: Int!
+    $orderBy: Vote_orderBy!
+    $orderDirection: OrderDirection!
+    $where: Vote_filter
+  ) {
     votes(
       first: $first
       skip: $skip
-      where: { space: $space, proposal: $proposal }
-      orderBy: vp
-      orderDirection: desc
+      where: $where
+      orderBy: $orderBy
+      orderDirection: $orderDirection
     ) {
       id
       voter {
@@ -168,6 +175,7 @@ export const VOTES_QUERY = gql`
       choice
       vp
       created
+      tx
     }
   }
 `;

src/networks/common/graphqlApi/types.ts

@@ -56,6 +56,7 @@ export type ApiProposal = {
     id: string;
     controller: string;
     metadata: {
+      name: string;
       avatar: string;
       voting_power_symbol: string;
       executors: string[];

src/networks/types.ts

@@ -129,7 +129,12 @@ export type NetworkActions = {
 };
 
 export type NetworkApi = {
-  loadProposalVotes(proposal: Proposal, paginationOpts: PaginationOpts): Promise<Vote[]>;
+  loadProposalVotes(
+    proposal: Proposal,
+    paginationOpts: PaginationOpts,
+    filter?: 'any' | 'for' | 'against' | 'abstain',
+    sortBy?: 'vp-desc' | 'vp-asc' | 'created-desc' | 'created-asc'
+  ): Promise<Vote[]>;
   loadUserVotes(voter: string): Promise<{ [key: string]: Vote }>;
   loadProposals(
     spaceId: string,

src/router.ts

@@ -9,6 +9,8 @@ import SpaceTreasury from '@/views/Space/Treasury.vue';
 import SpaceDelegates from '@/views/Space/Delegates.vue';
 import Editor from '@/views/Editor.vue';
 import Proposal from '@/views/Proposal.vue';
+import ProposalOverview from '@/views/Proposal/Overview.vue';
+import ProposalVotes from '@/views/Proposal/Votes.vue';
 import User from '@/views/User.vue';
 import Create from '@/views/Create.vue';
 import Settings from '@/views/Settings.vue';
@@ -36,7 +38,15 @@ const routes: any[] = [
     name: 'editor',
     component: Editor
   },
-  { path: '/:space/proposal/:id?', name: 'proposal', component: Proposal },
+  {
+    path: '/:space/proposal/:id?',
+    name: 'proposal',
+    component: Proposal,
+    children: [
+      { path: '', name: 'proposal-overview', component: ProposalOverview },
+      { path: 'votes', name: 'proposal-votes', component: ProposalVotes }
+    ]
+  },
   { path: '/profile/:id', name: 'user', component: User },
   { path: '/create', name: 'create', component: Create },
   {

src/style.scss

@@ -9,7 +9,7 @@
   --link-color: #faf9fc;
   --content-color: rgba(250, 249, 252, 0.8);
   --heading-color: #faf9fc;
-  --border-color: #333237;
+  --border-color: 51, 50, 55;
   --block-bg: #1c1b20;
   --active-bg: #29282e;
   --hover-bg: #232227;
@@ -23,7 +23,7 @@
   --link-color: #111111;
   --content-color: rgba(17, 17, 17, 0.8);
   --heading-color: #111111;
-  --border-color: #e5e5e6;
+  --border-color: 229, 229, 230;
   --block-bg: white;
   --active-bg: #ededed;
   --hover-bg: #f7f7f7;
@@ -118,13 +118,13 @@ a,
 
 .choice-bg {
   &._1 {
-    @apply bg-green;
+    @apply bg-choice-for;
   }
   &._2 {
-    @apply bg-red;
+    @apply bg-choice-against;
   }
   &._3 {
-    @apply bg-gray-500;
+    @apply bg-choice-abstain;
   }
   &._quorum {
     @apply bg-skin-border;

src/types.ts

@@ -81,6 +81,7 @@ export type Proposal = {
   quorum: number;
   space: {
     id: string;
+    name: string;
     avatar: string;
     controller: string;
     voting_power_symbol: string;
@@ -152,6 +153,7 @@ export type Vote = {
   choice: number;
   vp: number;
   created: number;
+  tx: string;
 };
 
 export type Draft = {