feat: Support for Optimistic Quorum (#4626)

* feat: Add quorum type to space settings

* feat: Support for Optimistic Quorum

* Update src/composables/useFormSpaceSettings.ts

Co-authored-by: Sam <51686767+samuveth@users.noreply.github.com>

* Remove i18n

* Remove i18n

* Move logic to computed

* lint

* Update src/helpers/interfaces.ts

Co-authored-by: Sam <51686767+samuveth@users.noreply.github.com>

* Update src/helpers/interfaces.ts

Co-authored-by: Sam <51686767+samuveth@users.noreply.github.com>

---------

Co-authored-by: Sam <51686767+samuveth@users.noreply.github.com>
Co-authored-by: Wan <495709+wa0x6e@users.noreply.github.com>

src/components/ProposalsItemFooter.vue

@@ -2,11 +2,30 @@
 import capitalize from 'lodash/capitalize';
 import { Proposal } from '@/helpers/interfaces';
 
-defineProps<{
+const props = defineProps<{
   proposal: Proposal;
 }>();
 
 const { getRelativeProposalPeriod, formatPercentNumber } = useIntl();
+const quorumText = computed(() => {
+  if (!props.proposal.quorum || !props.proposal.scores_total) {
+    return '';
+  }
+
+  const optimisticQuorum = props.proposal.quorumType === 'optimistic';
+  const percentage = formatPercentNumber(
+    optimisticQuorum
+      ? Number(
+          props.proposal.scores
+            .filter((c, i) => i === 1)
+            .reduce((a, b) => a + b, 0) / props.proposal.quorum
+        )
+      : Number(props.proposal.scores_total / props.proposal.quorum)
+  );
+  return optimisticQuorum
+    ? `${percentage} quorum rejection`
+    : `${percentage} quorum reached`;
+});
 </script>
 
 <template>
@@ -29,16 +48,9 @@ const { getRelativeProposalPeriod, formatPercentNumber } = useIntl();
         )
       }}
     </span>
-    <template
-      v-if="
-        proposal.quorum &&
-        proposal.scores_total &&
-        !proposal.space.plugins?.quorum
-      "
-    >
+    <template v-if="proposal.quorum && proposal.scores_total">
       -
-      {{ formatPercentNumber(Number(proposal.scores_total / proposal.quorum)) }}
-      {{ $t('quorumReached') }}
+      {{ quorumText }}
     </template>
   </div>
 </template>

src/components/SpaceProposalResultsQuorum.vue

@@ -7,22 +7,33 @@ const props = defineProps<{
   results: Results;
 }>();
 
-const { totalQuorumScore, quorum, loadingQuorum } = useQuorum(props);
+const { totalQuorumScore, quorum, quorumType, loadingQuorum } =
+  useQuorum(props);
+
 const { formatCompactNumber, formatPercentNumber } = useIntl();
 </script>
 
 <template>
   <div class="pt-2 text-skin-link">
     <div class="flex justify-between">
       <div class="flex items-center gap-1">
-        {{ $t('settings.quorum.label') }}
+        {{ quorumType === 'optimistic' ? 'Optimistic Quorum' : 'Quorum' }}
       </div>
       <LoadingSpinner v-if="loadingQuorum" class="mr-1" />
       <div v-else class="flex gap-2">
         <i-ho-check
-          v-if="quorum && totalQuorumScore >= quorum"
-          class="text-skin-success text-green"
+          v-if="
+            quorum && quorumType === 'default' && totalQuorumScore >= quorum
+          "
+          class="text-green"
+        />
+        <i-ho-x
+          v-if="
+            quorum && quorumType === 'optimistic' && totalQuorumScore >= quorum
+          "
+          class="text-red"
         />
+
         <span
           v-tippy="{ content: formatPercentNumber(totalQuorumScore / quorum) }"
         >

src/composables/useQuorum.ts

@@ -15,8 +15,14 @@ const broviderUrl = import.meta.env.VITE_BROVIDER_URL;
 export function useQuorum(props: QuorumProps) {
   const loading = ref(false);
   const quorum = ref(0);
+  const quorumType = ref('default');
 
   const totalQuorumScore = computed(() => {
+    if (props.proposal.quorumType === 'optimistic') {
+      return props.results.scores
+        .filter((c, i) => i === 1)
+        .reduce((a, b) => a + b, 0);
+    }
     const basicCount = props.space.plugins?.quorum?.basicCount;
     if (basicCount && props.proposal.type === 'basic')
       return props.results.scores
@@ -106,6 +112,7 @@ export function useQuorum(props: QuorumProps) {
       props.space.plugins.quorum,
       props.proposal.snapshot
     );
+    quorumType.value = props.proposal.quorumType;
     loading.value = false;
   }
 
@@ -114,6 +121,7 @@ export function useQuorum(props: QuorumProps) {
   return {
     loadingQuorum: loading,
     totalQuorumScore,
-    quorum
+    quorum,
+    quorumType
   };
 }

src/helpers/interfaces.ts

@@ -230,6 +230,7 @@ export interface Proposal {
   validation: VoteValidation;
   discussion: string;
   quorum: number;
+  quorumType: 'default' | 'optimistic';
   scores: number[];
   scores_state: string;
   scores_total: number;

src/helpers/queries.ts

@@ -56,6 +56,7 @@ export const PROPOSAL_QUERY = gql`
       network
       type
       quorum
+      quorumType
       symbol
       privacy
       validation {
@@ -131,6 +132,7 @@ export const PROPOSALS_QUERY = gql`
       scores
       votes
       quorum
+      quorumType
       symbol
       flagged
     }