From 7292c7cd3643f63994d89091dcff9959e5672b80 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Thu, 14 Mar 2024 12:12:06 +0400
Subject: [PATCH] feat: allow creation of offchain proposals with weighted
 voting type

---
 apps/ui/src/components/EditorVotingType.vue   |  4 +++
 .../src/components/ProposalVoteWeighted.vue   | 29 +++++++++++++++++++
 apps/ui/src/helpers/constants.ts              |  7 ++++-
 apps/ui/src/networks/offchain/constants.ts    |  2 +-
 apps/ui/src/views/Proposal.vue                |  6 ++++
 5 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 apps/ui/src/components/ProposalVoteWeighted.vue

diff --git a/apps/ui/src/components/EditorVotingType.vue b/apps/ui/src/components/EditorVotingType.vue
index 1a099e9cd..4a155c4fb 100644
--- a/apps/ui/src/components/EditorVotingType.vue
+++ b/apps/ui/src/components/EditorVotingType.vue
@@ -20,6 +20,10 @@ const VOTING_TYPES_INFO = computed(() => ({
   approval: {
     label: 'Approval voting',
     description: 'Voters can select multiple choices, each choice receiving full voting power.'
+  },
+  weighted: {
+    label: 'Weighted voting',
+    description: 'Each voter may spread voting power across any number of choices.'
   }
 }));
 
diff --git a/apps/ui/src/components/ProposalVoteWeighted.vue b/apps/ui/src/components/ProposalVoteWeighted.vue
new file mode 100644
index 000000000..2cbb07372
--- /dev/null
+++ b/apps/ui/src/components/ProposalVoteWeighted.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { Choice, Proposal } from '@/types';
+
+defineProps<{
+  sendingType: Choice | null;
+  proposal: Proposal;
+}>();
+
+// const emit = defineEmits<{
+//   (e: 'vote', value: Choice);
+// }>();
+</script>
+
+<template>
+  <div class="flex flex-col space-y-3">
+    <div class="flex flex-col space-y-2">
+      <UiButton
+        v-for="(choice, index) in proposal.choices"
+        :key="index"
+        class="!h-[48px] text-left w-full flex items-center"
+      >
+        <div class="grow truncate">
+          {{ choice }}
+        </div>
+      </UiButton>
+    </div>
+    <UiButton primary class="!h-[48px] w-full" :loading="!!sendingType"> Vote </UiButton>
+  </div>
+</template>
diff --git a/apps/ui/src/helpers/constants.ts b/apps/ui/src/helpers/constants.ts
index 67407f1f3..d1597bdb4 100644
--- a/apps/ui/src/helpers/constants.ts
+++ b/apps/ui/src/helpers/constants.ts
@@ -25,4 +25,9 @@ export const COINGECKO_BASE_ASSETS = {
 
 export const MAX_SYMBOL_LENGTH = 12;
 export const BASIC_CHOICES = ['For', 'Against', 'Abstain'];
-export const SUPPORTED_VOTING_TYPES: VoteType[] = ['basic', 'single-choice', 'approval'] as const;
+export const SUPPORTED_VOTING_TYPES: VoteType[] = [
+  'basic',
+  'single-choice',
+  'approval',
+  'weighted'
+] as const;
diff --git a/apps/ui/src/networks/offchain/constants.ts b/apps/ui/src/networks/offchain/constants.ts
index de9f84955..ec3a4b6a2 100644
--- a/apps/ui/src/networks/offchain/constants.ts
+++ b/apps/ui/src/networks/offchain/constants.ts
@@ -19,6 +19,6 @@ export const EDITOR_PROPOSAL_VALIDATION_VOTING_STRATEGIES = [];
 export const EDITOR_EXECUTION_STRATEGIES = [];
 export const EDITOR_SNAPSHOT_OFFSET = 4;
 export const EDITOR_APP_NAME = 'snapshot-v2';
-export const EDITOR_VOTING_TYPES = ['basic', 'single-choice', 'approval'];
+export const EDITOR_VOTING_TYPES = ['basic', 'single-choice', 'approval', 'weighted'];
 
 export const DEFAULT_VOTING_DELAY = 60 * 60 * 24 * 7;
diff --git a/apps/ui/src/views/Proposal.vue b/apps/ui/src/views/Proposal.vue
index 2d8e3e7d9..eaf53c544 100644
--- a/apps/ui/src/views/Proposal.vue
+++ b/apps/ui/src/views/Proposal.vue
@@ -190,6 +190,12 @@ watchEffect(() => {
               :sending-type="sendingType"
               @vote="handleVoteClick"
             />
+            <ProposalVoteWeighted
+              v-else-if="proposal.type === 'weighted'"
+              :proposal="proposal"
+              :sending-type="sendingType"
+              @vote="handleVoteClick"
+            />
           </ProposalVote>
         </template>