feat: vote modal with reason

apps/ui/src/components/IndicatorVotingPower.vue

@@ -1,38 +1,33 @@
 <script setup lang="ts">
-import { _vp } from '@/helpers/utils';
-import { NetworkID } from '@/types';
-import { VotingPower, VotingPowerStatus } from '@/networks/types';
+import { getFormattedVotingPower } from '@/helpers/utils';
+import { utils } from '@snapshot-labs/sx';
 import { evmNetworks } from '@/networks';
+import type { NetworkID } from '@/types';
+import type { VotingPower, VotingPowerStatus } from '@/networks/types';
 
 const props = defineProps<{
   networkId: NetworkID;
-  status: VotingPowerStatus;
-  votingPowerSymbol: string;
-  votingPowers: VotingPower[];
+  votingPower?: {
+    totalVotingPower: bigint;
+    votingPowers: VotingPower[];
+    status: VotingPowerStatus;
+    symbol: string;
+    decimals: number;
+    error: utils.errors.VotingPowerDetailsError | null;
+  };
 }>();
 
 defineEmits<{
-  (e: 'getVotingPower');
+  (e: 'fetchVotingPower');
 }>();
 
 const { web3 } = useWeb3();
 
 const modalOpen = ref(false);
 
-const votingPower = computed(() => props.votingPowers.reduce((acc, b) => acc + b.value, 0n));
-const decimals = computed(() =>
-  Math.max(...props.votingPowers.map(votingPower => votingPower.decimals), 0)
-);
-const formattedVotingPower = computed(() => {
-  const value = _vp(Number(votingPower.value) / 10 ** decimals.value);
+const formattedVotingPower = computed(() => getFormattedVotingPower(props.votingPower));
 
-  if (props.votingPowerSymbol) {
-    return `${value} ${props.votingPowerSymbol}`;
-  }
-
-  return value;
-});
-const loading = computed(() => props.status === 'loading');
+const loading = computed(() => !props.votingPower || props.votingPower.status === 'loading');
 
 function handleModalOpen() {
   modalOpen.value = true;
@@ -57,7 +52,10 @@ function handleModalOpen() {
           @click="handleModalOpen"
         >
           <IH-lightning-bolt class="inline-block -ml-1" />
-          <IH-exclamation v-if="props.status === 'error'" class="inline-block ml-1 text-rose-500" />
+          <IH-exclamation
+            v-if="props.votingPower && props.votingPower.status === 'error'"
+            class="inline-block ml-1 text-rose-500"
+          />
           <span v-else class="ml-1">{{ formattedVotingPower }}</span>
         </UiButton>
       </UiTooltip>
@@ -66,12 +64,9 @@ function handleModalOpen() {
       <ModalVotingPower
         :open="modalOpen"
         :network-id="networkId"
-        :voting-power-symbol="votingPowerSymbol"
-        :voting-powers="props.votingPowers"
-        :voting-power-status="status"
-        :final-decimals="decimals"
+        :voting-power="props.votingPower"
         @close="modalOpen = false"
-        @get-voting-power="$emit('getVotingPower')"
+        @fetch-voting-power="$emit('fetchVotingPower')"
       />
     </teleport>
   </div>

apps/ui/src/components/MessageVotingPower.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const props = defineProps<{
+  minVotingPower?: bigint;
+  minProposalThreshold?: bigint;
+  votingPower: {
+    status: string;
+    totalVotingPower: bigint;
+  };
+}>();
+
+defineEmits<{
+  (e: 'fetchVotingPower');
+}>();
+
+const insufficientVoteVp = computed(
+  () =>
+    props.votingPower.status === 'success' &&
+    props.minVotingPower !== undefined &&
+    props.votingPower.totalVotingPower <= props.minVotingPower
+);
+
+const insufficientProposeVp = computed(
+  () =>
+    props.votingPower.status === 'success' &&
+    props.minProposalThreshold !== undefined &&
+    props.votingPower.totalVotingPower < props.minProposalThreshold
+);
+</script>
+
+<template>
+  <div
+    v-if="votingPower.status === 'error'"
+    class="flex flex-col gap-3 items-start"
+    v-bind="$attrs"
+  >
+    <UiAlert type="error">There was an error fetching your voting power.</UiAlert>
+    <UiButton type="button" class="flex items-center gap-2" @click="$emit('fetchVotingPower')">
+      <IH-refresh />Retry
+    </UiButton>
+  </div>
+  <UiAlert v-else-if="insufficientVoteVp" type="error">
+    You do not have enough voting power to vote.
+  </UiAlert>
+  <UiAlert v-else-if="insufficientProposeVp" type="error">
+    You do not have enough voting power to create proposal in this space.
+  </UiAlert>
+</template>

apps/ui/src/components/Modal/Vote.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { getChoiceText, getFormattedVotingPower } from '@/helpers/utils';
+import { validateForm } from '@/helpers/validation';
+import type { Choice, Proposal } from '@/types';
+
+const definition = {
+  type: 'object',
+  title: 'Vote',
+  additionalProperties: false,
+  required: [],
+  properties: {
+    reason: {
+      title: 'Reason',
+      type: 'string',
+      format: 'long',
+      examples: ['Share you reason (optional)'],
+      maxLength: 1000
+    }
+  }
+};
+
+const props = defineProps<{
+  proposal: Proposal;
+  choice: Choice | null;
+  open: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close');
+  (e: 'voted');
+}>();
+
+const { vote } = useActions();
+const { web3 } = useWeb3();
+const {
+  votingPower,
+  fetch: fetchVotingPower,
+  reset: resetVotingPower,
+  hasVoteVp
+} = useVotingPower();
+
+const loading = ref(false);
+const form = ref<Record<string, string>>({ reason: '' });
+
+const formErrors = computed(() =>
+  validateForm(definition, form.value, { skipEmptyOptionalFields: true })
+);
+const formattedVotingPower = computed(() => getFormattedVotingPower(votingPower.value));
+
+const canSubmit = computed(
+  () => !!props.choice && Object.keys(formErrors.value).length === 0 && hasVoteVp.value
+);
+
+async function handleSubmit() {
+  loading.value = true;
+
+  if (!props.choice) return;
+
+  try {
+    await vote(props.proposal, props.choice, form.value.reason);
+    emit('voted');
+    emit('close');
+  } finally {
+    loading.value = false;
+  }
+}
+
+function handleFetchVotingPower() {
+  fetchVotingPower(props.proposal);
+}
+
+watch(
+  [() => props.open, () => web3.value.account],
+  ([open, toAccount], [, fromAccount]) => {
+    if (fromAccount && toAccount && fromAccount !== toAccount) {
+      resetVotingPower();
+    }
+
+    if (open) handleFetchVotingPower();
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <UiModal :open="open" @close="$emit('close')">
+    <template #header>
+      <h3>Cast your vote</h3>
+    </template>
+
+    <div class="m-4 flex flex-col space-y-3">
+      <MessageVotingPower
+        v-if="votingPower"
+        :voting-power="votingPower"
+        :min-voting-power="0n"
+        @fetch-voting-power="handleFetchVotingPower"
+      />
+      <dl>
+        <dt class="text-sm leading-5">Choice</dt>
+        <dd class="font-semibold text-skin-heading text-[20px] leading-6">
+          <span
+            v-if="choice"
+            class="test-skin-heading"
+            v-text="getChoiceText(proposal.choices, choice)"
+          />
+          <span v-else class="text-skin-danger"> No choice selected </span>
+        </dd>
+        <dt class="text-sm leading-5 mt-3">Voting power</dt>
+        <dd v-if="!votingPower || votingPower.status === 'loading'">
+          <UiLoading />
+        </dd>
+        <dd
+          v-else-if="votingPower.status === 'success'"
+          class="font-semibold text-skin-heading text-[20px] leading-6"
+          v-text="formattedVotingPower"
+        />
+        <dd
+          v-else-if="votingPower.status === 'error'"
+          class="font-semibold text-skin-heading text-[20px] leading-6"
+          v-text="formattedVotingPower"
+        />
+      </dl>
+      <div class="s-box">
+        <UiForm v-model="form" :error="formErrors" :definition="definition" />
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex space-x-3">
+        <UiButton class="w-full" @click="$emit('close')"> Cancel </UiButton>
+        <UiButton
+          primary
+          class="w-full"
+          :disabled="!canSubmit"
+          :loading="loading"
+          @click="handleSubmit"
+        >
+          Confirm
+        </UiButton>
+      </div>
+    </template>
+  </UiModal>
+</template>

apps/ui/src/components/Modal/VotingPower.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { utils } from '@snapshot-labs/sx';
 import { getNetwork } from '@/networks';
 import { _n, shorten } from '@/helpers/utils';
 import { addressValidator as isValidAddress } from '@/helpers/validation';
@@ -8,23 +9,26 @@ import { VotingPower, VotingPowerStatus } from '@/networks/types';
 const props = defineProps<{
   open: boolean;
   networkId: NetworkID;
-  votingPowerSymbol: string;
-  votingPowers: VotingPower[];
-  votingPowerStatus: VotingPowerStatus;
-  finalDecimals: number;
+  votingPower?: {
+    symbol: string;
+    totalVotingPower: bigint;
+    decimals: number;
+    votingPowers: VotingPower[];
+    status: VotingPowerStatus;
+    error: utils.errors.VotingPowerDetailsError | null;
+  };
 }>();
 
 defineEmits<{
   (e: 'close');
-  (e: 'getVotingPower');
+  (e: 'fetchVotingPower');
 }>();
 
 const network = computed(() => getNetwork(props.networkId));
 const baseNetwork = computed(() =>
   network.value.baseNetworkId ? getNetwork(network.value.baseNetworkId) : network.value
 );
-const loading = computed(() => props.votingPowerStatus === 'loading');
-const error = computed(() => props.votingPowerStatus === 'error');
+const loading = computed(() => !props.votingPower || props.votingPower.status === 'loading');
 </script>
 
 <template>
@@ -33,15 +37,14 @@ const error = computed(() => props.votingPowerStatus === 'error');
       <h3>Your voting power</h3>
     </template>
     <UiLoading v-if="loading" class="p-4 block text-center" />
-    <div v-else>
-      <div v-if="error" class="p-4 flex flex-col gap-3 items-start">
-        <UiAlert type="error">There was an error fetching your voting power.</UiAlert>
-        <UiButton type="button" class="flex items-center gap-2" @click="$emit('getVotingPower')">
-          <IH-refresh />Retry
-        </UiButton>
-      </div>
+    <div v-else-if="votingPower">
+      <MessageVotingPower
+        class="p-4"
+        :voting-power="votingPower"
+        @fetch-voting-power="$emit('fetchVotingPower')"
+      />
       <div
-        v-for="(strategy, i) in votingPowers"
+        v-for="(strategy, i) in votingPower.votingPowers"
         :key="i"
         class="py-3 px-4 border-b last:border-b-0"
       >
@@ -57,12 +60,12 @@ const error = computed(() => props.votingPowerStatus === 'error');
           />
           <div class="text-skin-link shrink-0">
             {{
-              _n(Number(strategy.value) / 10 ** finalDecimals, 'compact', {
+              _n(Number(strategy.value) / 10 ** votingPower.decimals, 'compact', {
                 maximumFractionDigits: 2,
                 formatDust: true
               })
             }}
-            {{ votingPowerSymbol }}
+            {{ votingPower.symbol }}
           </div>
         </div>
         <div class="flex justify-between">

apps/ui/src/components/ProposalVoteApproval.vue

@@ -2,7 +2,6 @@
 import { Choice, Proposal } from '@/types';
 
 defineProps<{
-  sendingType: Choice | null;
   proposal: Proposal;
 }>();
 
@@ -37,12 +36,7 @@ function toggleSelectedChoice(choice: number) {
         <IH-check v-if="selectedChoices.includes(index + 1)" class="shrink-0" />
       </UiButton>
     </div>
-    <UiButton
-      primary
-      class="!h-[48px] w-full"
-      :loading="!!sendingType"
-      @click="emit('vote', selectedChoices)"
-    >
+    <UiButton primary class="!h-[48px] w-full" @click="emit('vote', selectedChoices)">
       Vote
     </UiButton>
   </div>