feat: format quorum using compact format (#994)

apps/ui/src/components/ProposalResults.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  formatQuorum,
   quorumChoiceProgress,
   quorumLabel,
   quorumProgress
@@ -97,7 +98,7 @@ const otherResultsSummary = computed(() => {
       </a>
       <div v-if="proposal.quorum" class="mt-3.5">
         {{ quorumLabel(proposal.quorum_type) }}:
-        <span class="text-skin-link">{{ _p(totalProgress) }}</span>
+        <span class="text-skin-link">{{ formatQuorum(totalProgress) }}</span>
       </div>
     </div>
   </div>
@@ -177,7 +178,7 @@ const otherResultsSummary = computed(() => {
       </button>
       <div v-if="proposal.quorum">
         {{ quorumLabel(proposal.quorum_type) }}:
-        <span class="text-skin-link">{{ _p(totalProgress) }}</span>
+        <span class="text-skin-link">{{ formatQuorum(totalProgress) }}</span>
       </div>
       <div v-if="proposal.privacy === 'shutter'" class="mt-2.5">
         <a

apps/ui/src/components/ProposalsListItemHeading.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { quorumLabel, quorumProgress } from '@/helpers/quorum';
-import { _n, _p, _rt, getProposalId, shortenAddress } from '@/helpers/utils';
+import { formatQuorum, quorumLabel, quorumProgress } from '@/helpers/quorum';
+import { _n, _rt, getProposalId, shortenAddress } from '@/helpers/utils';
 import { Proposal as ProposalType } from '@/types';
 
 const props = withDefaults(
@@ -110,7 +110,8 @@ const space = computed(() =>
         {{ proposal.vote_count !== 1 ? 'votes' : 'vote' }}
       </template>
       <span v-if="proposal.quorum" class="lowercase">
-        · {{ _p(totalProgress) }} {{ quorumLabel(proposal.quorum_type) }}
+        · {{ formatQuorum(totalProgress) }}
+        {{ quorumLabel(proposal.quorum_type) }}
       </span>
       ·
       <button

apps/ui/src/helpers/quorum.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+import { formatQuorum } from './quorum';
+
+describe('formatQuorum', () => {
+  it('should format using 3 significant digits', () => {
+    expect(formatQuorum(0.001)).toBe('0.1%');
+    expect(formatQuorum(0.1234)).toBe('12.3%');
+    expect(formatQuorum(0.555667)).toBe('55.5%');
+    expect(formatQuorum(4.446326)).toBe('444%');
+    expect(formatQuorum(999.90111)).toBe('99.9k%');
+  });
+
+  it('should not round up but truncate', () => {
+    expect(formatQuorum(0.9999)).toBe('99.9%');
+  });
+
+  it('should format big numbers in compact format', () => {
+    expect(formatQuorum(1000)).toBe('100k%');
+    expect(formatQuorum(1234)).toBe('123k%');
+    expect(formatQuorum(5556)).toBe('555k%');
+    expect(formatQuorum(44444)).toBe('4.44m%');
+  });
+});

apps/ui/src/helpers/quorum.ts

@@ -28,3 +28,14 @@ export function quorumChoiceProgress(
 export function quorumLabel(quorumType: Proposal['quorum_type']): string {
   return `Quorum${quorumType === 'rejection' ? ' of reject' : ''}`;
 }
+
+export function formatQuorum(value: number) {
+  const formatter = new Intl.NumberFormat('en', {
+    notation: 'compact',
+    maximumSignificantDigits: 3,
+    roundingMode: 'trunc',
+    style: 'percent'
+  });
+
+  return formatter.format(value).toLowerCase();
+}