From bb47e8d53a21c1622c9470ad82b0ac07c65be491 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Sat, 20 Jul 2024 12:29:36 +0900
Subject: [PATCH 01/30] feat: add reason when voting

---
 .changeset/breezy-owls-clean.md               |   5 +
 .../src/components/IndicatorVotingPower.vue   |  47 +++---
 apps/ui/src/components/MessageVotingPower.vue |  47 ++++++
 apps/ui/src/components/Modal/Vote.vue         | 143 ++++++++++++++++++
 apps/ui/src/components/Modal/VotingPower.vue  |  37 ++---
 .../src/components/ProposalVoteApproval.vue   |   8 +-
 apps/ui/src/components/ProposalVoteBasic.vue  |   4 -
 .../components/ProposalVoteRankedChoice.vue   |   8 +-
 .../components/ProposalVoteSingleChoice.vue   |   4 +-
 .../src/components/ProposalVoteWeighted.vue   |   8 +-
 apps/ui/src/components/ProposalsListItem.vue  |  34 +++--
 apps/ui/src/components/Ui/Button.vue          |  19 ++-
 apps/ui/src/composables/useActions.ts         |   5 +-
 apps/ui/src/composables/useVotingPower.ts     |  52 +++++++
 apps/ui/src/helpers/utils.ts                  |  31 +++-
 apps/ui/src/networks/evm/actions.ts           |   8 +-
 apps/ui/src/networks/offchain/actions.ts      |   6 +-
 apps/ui/src/networks/starknet/actions.ts      |   9 +-
 apps/ui/src/networks/types.ts                 |   3 +-
 apps/ui/src/stores/votingPowers.ts            |  92 +++++++++++
 apps/ui/src/views/Editor.vue                  |  66 +++-----
 apps/ui/src/views/Proposal.vue                | 129 +++++++---------
 apps/ui/src/views/Space/Proposals.vue         |  59 +++-----
 .../clients/offchain/ethereum-sig/index.ts    |   2 +-
 packages/sx.js/src/clients/offchain/types.ts  |   1 +
 .../clients/starknet/ethereum-sig/index.ts    |   4 +-
 .../clients/starknet/starknet-sig/index.ts    |   4 +-
 .../src/clients/starknet/starknet-tx/index.ts |   2 +-
 packages/sx.js/src/types/index.ts             |   1 +
 .../__snapshots__/index.test.ts.snap          |   1 +
 .../starknet/ethereum-sig/index.test.ts       |   1 +
 .../starknet/ethereum-tx/index.test.ts        |   3 +-
 .../__snapshots__/index.test.ts.snap          |  10 +-
 .../starknet/starknet-sig/index.test.ts       |   1 +
 34 files changed, 587 insertions(+), 267 deletions(-)
 create mode 100644 .changeset/breezy-owls-clean.md
 create mode 100644 apps/ui/src/components/MessageVotingPower.vue
 create mode 100644 apps/ui/src/components/Modal/Vote.vue
 create mode 100644 apps/ui/src/composables/useVotingPower.ts
 create mode 100644 apps/ui/src/stores/votingPowers.ts

diff --git a/.changeset/breezy-owls-clean.md b/.changeset/breezy-owls-clean.md
new file mode 100644
index 000000000..6b9d144e8
--- /dev/null
+++ b/.changeset/breezy-owls-clean.md
@@ -0,0 +1,5 @@
+---
+"@snapshot-labs/sx": patch
+---
+
+support submitting a reason when voting
diff --git a/apps/ui/src/components/IndicatorVotingPower.vue b/apps/ui/src/components/IndicatorVotingPower.vue
index 47d9fed84..01edd8b3e 100644
--- a/apps/ui/src/components/IndicatorVotingPower.vue
+++ b/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>
diff --git a/apps/ui/src/components/MessageVotingPower.vue b/apps/ui/src/components/MessageVotingPower.vue
new file mode 100644
index 000000000..1ba3343c1
--- /dev/null
+++ b/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>
diff --git a/apps/ui/src/components/Modal/Vote.vue b/apps/ui/src/components/Modal/Vote.vue
new file mode 100644
index 000000000..2f293a31a
--- /dev/null
+++ b/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>
diff --git a/apps/ui/src/components/Modal/VotingPower.vue b/apps/ui/src/components/Modal/VotingPower.vue
index 95f616914..f220375a5 100644
--- a/apps/ui/src/components/Modal/VotingPower.vue
+++ b/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">
diff --git a/apps/ui/src/components/ProposalVoteApproval.vue b/apps/ui/src/components/ProposalVoteApproval.vue
index c8bb54e3b..8ef901f34 100644
--- a/apps/ui/src/components/ProposalVoteApproval.vue
+++ b/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>
diff --git a/apps/ui/src/components/ProposalVoteBasic.vue b/apps/ui/src/components/ProposalVoteBasic.vue
index fece1d9e1..ea89d5a07 100644
--- a/apps/ui/src/components/ProposalVoteBasic.vue
+++ b/apps/ui/src/components/ProposalVoteBasic.vue
@@ -3,7 +3,6 @@ import { Choice } from '@/types';
 
 withDefaults(
   defineProps<{
-    sendingType: Choice | null;
     size?: number;
   }>(),
   { size: 48 }
@@ -20,7 +19,6 @@ const emit = defineEmits<{
       <UiButton
         class="!text-skin-success !border-skin-success !px-0"
         :class="{ '!w-[48px] !h-[48px]': size === 48, '!w-[40px] !h-[40px]': size === 40 }"
-        :loading="sendingType === 'for'"
         @click="emit('vote', 'for')"
       >
         <IH-check class="inline-block" />
@@ -30,7 +28,6 @@ const emit = defineEmits<{
       <UiButton
         class="!text-skin-danger !border-skin-danger !px-0"
         :class="{ '!w-[48px] !h-[48px]': size === 48, '!w-[40px] !h-[40px]': size === 40 }"
-        :loading="sendingType === 'against'"
         @click="emit('vote', 'against')"
       >
         <IH-x class="inline-block" />
@@ -40,7 +37,6 @@ const emit = defineEmits<{
       <UiButton
         class="!text-gray-500 !border-gray-500 !px-0"
         :class="{ '!w-[48px] !h-[48px]': size === 48, '!w-[40px] !h-[40px]': size === 40 }"
-        :loading="sendingType === 'abstain'"
         @click="emit('vote', 'abstain')"
       >
         <IH-minus-sm class="inline-block" />
diff --git a/apps/ui/src/components/ProposalVoteRankedChoice.vue b/apps/ui/src/components/ProposalVoteRankedChoice.vue
index cd86aa2fb..716514990 100644
--- a/apps/ui/src/components/ProposalVoteRankedChoice.vue
+++ b/apps/ui/src/components/ProposalVoteRankedChoice.vue
@@ -3,7 +3,6 @@ import Draggable from 'vuedraggable';
 import { Choice, Proposal } from '@/types';
 
 const props = defineProps<{
-  sendingType: Choice | null;
   proposal: Proposal;
 }>();
 
@@ -38,12 +37,7 @@ const selectedChoices = ref<number[]>(props.proposal.choices.map((_, i) => i + 1
         </UiButton>
       </template>
     </Draggable>
-    <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>
diff --git a/apps/ui/src/components/ProposalVoteSingleChoice.vue b/apps/ui/src/components/ProposalVoteSingleChoice.vue
index dc8f211ff..8ed122d7a 100644
--- a/apps/ui/src/components/ProposalVoteSingleChoice.vue
+++ b/apps/ui/src/components/ProposalVoteSingleChoice.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { Choice, Proposal } from '@/types';
+import { Proposal } from '@/types';
 
 defineProps<{
-  sendingType: Choice | null;
   proposal: Proposal;
 }>();
 
@@ -30,7 +29,6 @@ const selectedChoice = ref<number | null>(null);
     <UiButton
       primary
       class="!h-[48px] w-full"
-      :loading="!!sendingType"
       :disabled="!selectedChoice"
       @click="emit('vote', selectedChoice!)"
     >
diff --git a/apps/ui/src/components/ProposalVoteWeighted.vue b/apps/ui/src/components/ProposalVoteWeighted.vue
index 562d0c7eb..f5ba268b5 100644
--- a/apps/ui/src/components/ProposalVoteWeighted.vue
+++ b/apps/ui/src/components/ProposalVoteWeighted.vue
@@ -3,7 +3,6 @@ import { _p, getChoiceWeight } from '@/helpers/utils';
 import { Choice, Proposal } from '@/types';
 
 defineProps<{
-  sendingType: Choice | null;
   proposal: Proposal;
 }>();
 
@@ -82,12 +81,7 @@ watch(
         ></div>
       </div>
     </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>
diff --git a/apps/ui/src/components/ProposalsListItem.vue b/apps/ui/src/components/ProposalsListItem.vue
index 13656394b..30af263a5 100644
--- a/apps/ui/src/components/ProposalsListItem.vue
+++ b/apps/ui/src/components/ProposalsListItem.vue
@@ -6,22 +6,22 @@ import type { Proposal as ProposalType, Choice } from '@/types';
 const props = defineProps<{ proposal: ProposalType; showSpace: boolean }>();
 
 const { getTsFromCurrent } = useMetaStore();
-const { vote } = useActions();
+const { modalAccountOpen } = useModal();
+const { web3 } = useWeb3();
+
 const { votes } = useAccount();
 const modalOpenTimeline = ref(false);
-const sendingType = ref<Choice | null>(null);
+const modalOpenVote = ref(false);
+const selectedChoice = ref<Choice | null>(null);
 
 const totalProgress = computed(() => quorumProgress(props.proposal));
 
-async function handleVoteClick(choice: Choice) {
-  sendingType.value = choice;
+const handleVoteClick = (choice: Choice) => {
+  if (!web3.value.account) return (modalAccountOpen.value = true);
 
-  try {
-    await vote(props.proposal, choice);
-  } finally {
-    sendingType.value = null;
-  }
-}
+  selectedChoice.value = choice;
+  modalOpenVote.value = true;
+};
 </script>
 <template>
   <div>
@@ -119,12 +119,7 @@ async function handleVoteClick(choice: Choice) {
             <ProposalResults v-if="proposal.type === 'basic'" :proposal="proposal" />
             <div v-else />
           </template>
-          <ProposalVoteBasic
-            v-if="proposal.type === 'basic'"
-            :sending-type="sendingType"
-            :size="40"
-            @vote="handleVoteClick"
-          />
+          <ProposalVoteBasic v-if="proposal.type === 'basic'" :size="40" @vote="handleVoteClick" />
         </ProposalVote>
       </div>
     </div>
@@ -134,6 +129,13 @@ async function handleVoteClick(choice: Choice) {
         :proposal="proposal"
         @close="modalOpenTimeline = false"
       />
+      <ModalVote
+        :choice="selectedChoice"
+        :proposal="proposal"
+        :open="modalOpenVote"
+        @close="modalOpenVote = false"
+        @voted="selectedChoice = null"
+      />
     </teleport>
   </div>
 </template>
diff --git a/apps/ui/src/components/Ui/Button.vue b/apps/ui/src/components/Ui/Button.vue
index 19d97d0d0..fe1451972 100644
--- a/apps/ui/src/components/Ui/Button.vue
+++ b/apps/ui/src/components/Ui/Button.vue
@@ -27,7 +27,7 @@ withDefaults(
   </button>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
 .button {
   &:disabled {
     color: rgba(var(--border)) !important;
@@ -36,6 +36,23 @@ withDefaults(
 
   &.primary {
     @apply bg-skin-link text-skin-bg border-skin-link;
+
+    &:disabled {
+      @apply bg-skin-bg border-skin-border text-skin-text;
+
+      .loading,
+      .loading.inverse {
+        svg {
+          path {
+            stroke: rgba(var(--border));
+          }
+
+          stop {
+            stop-color: rgba(var(--border));
+          }
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/apps/ui/src/composables/useActions.ts b/apps/ui/src/composables/useActions.ts
index acf3ba2ae..f2b03647a 100644
--- a/apps/ui/src/composables/useActions.ts
+++ b/apps/ui/src/composables/useActions.ts
@@ -210,7 +210,7 @@ export function useActions() {
     await wrapPromise(space.network, network.actions.setMetadata(auth.web3, space, metadata));
   }
 
-  async function vote(proposal: Proposal, choice: Choice) {
+  async function vote(proposal: Proposal, choice: Choice, reason: string) {
     if (!web3.value.account) return await forceLogin();
 
     const network = getNetwork(proposal.network);
@@ -222,7 +222,8 @@ export function useActions() {
         web3.value.type as Connector,
         web3.value.account,
         proposal,
-        choice
+        choice,
+        reason
       )
     );
 
diff --git a/apps/ui/src/composables/useVotingPower.ts b/apps/ui/src/composables/useVotingPower.ts
new file mode 100644
index 000000000..7af8ac67f
--- /dev/null
+++ b/apps/ui/src/composables/useVotingPower.ts
@@ -0,0 +1,52 @@
+import type { Space, Proposal } from '@/types';
+
+export function useVotingPower() {
+  const { web3 } = useWeb3();
+  const votingPowersStore = useVotingPowersStore();
+
+  const item = ref<Space | Proposal | undefined>();
+
+  const space = computed(() =>
+    item.value && 'space' in item.value ? (item.value?.space as Space) : item.value
+  );
+
+  const snapshot = computed(() =>
+    item.value && 'snapshot' in item.value ? item.value.snapshot : undefined
+  );
+
+  const votingPower = computed(
+    () => space.value && votingPowersStore.get(space.value, snapshot.value)
+  );
+
+  const hasVoteVp = computed(
+    () => (votingPower.value && votingPower.value.totalVotingPower > 0n) || false
+  );
+
+  const hasProposeVp = computed(
+    () =>
+      (votingPower.value &&
+        space.value &&
+        votingPower.value.totalVotingPower >= BigInt(space.value.proposal_threshold)) ||
+      false
+  );
+
+  function reset() {
+    votingPowersStore.reset();
+  }
+
+  function fetch(spaceOrProposal: Space | Proposal) {
+    if (!web3.value.account) return;
+
+    item.value = spaceOrProposal;
+    votingPowersStore.fetch(item.value, web3.value.account, snapshot.value);
+  }
+
+  watch(
+    () => web3.value.account,
+    account => {
+      if (!account) reset();
+    }
+  );
+
+  return { votingPower, hasVoteVp, hasProposeVp, fetch, reset };
+}
diff --git a/apps/ui/src/helpers/utils.ts b/apps/ui/src/helpers/utils.ts
index ab170c655..b0ca1bd95 100644
--- a/apps/ui/src/helpers/utils.ts
+++ b/apps/ui/src/helpers/utils.ts
@@ -11,7 +11,7 @@ import { upload as pin } from '@snapshot-labs/pineapple';
 import networks from '@/helpers/networks.json';
 import pkg from '@/../package.json';
 import type { Web3Provider } from '@ethersproject/providers';
-import type { Proposal, SpaceMetadata } from '@/types';
+import type { Choice, Proposal, SpaceMetadata } from '@/types';
 import { MAX_SYMBOL_LENGTH } from './constants';
 import ICX from '~icons/c/x';
 import ICDiscord from '~icons/c/discord';
@@ -436,18 +436,24 @@ export function getChoiceWeight(selectedChoices: Record<string, number>, index:
   return isNaN(percent) ? 0 : percent;
 }
 
-export function getChoiceText(
-  availableChoices: string[],
-  choice: number | number[] | Record<string, number>
-) {
+export function getChoiceText(availableChoices: string[], choice: Choice) {
+  if (typeof choice === 'string') {
+    return ['for', 'against', 'abstain'].includes(choice)
+      ? choice.charAt(0).toUpperCase() + choice.slice(1)
+      : 'Invalid choice';
+  }
+
   if (typeof choice === 'number') {
-    return availableChoices[choice - 1];
+    return availableChoices[choice - 1] || 'Invalid choice';
   }
 
   if (Array.isArray(choice)) {
+    if (!choice.length) return 'Blank vote';
     return choice.map(index => availableChoices[index - 1]).join(', ');
   }
 
+  if (!Object.keys(choice).length) return 'Blank vote';
+
   const total = Object.values(choice).reduce((acc, weight) => acc + weight, 0);
 
   return Object.entries(choice)
@@ -484,3 +490,16 @@ export function getSocialNetworksLink(data: any) {
     })
     .filter(social => social.href);
 }
+
+export function getFormattedVotingPower(votingPower?: {
+  totalVotingPower: bigint;
+  decimals: number;
+  symbol: string;
+}) {
+  if (!votingPower) return;
+
+  const { totalVotingPower, decimals, symbol } = votingPower;
+  const value = _vp(Number(totalVotingPower) / 10 ** decimals);
+
+  return symbol ? `${value} ${symbol}` : value;
+}
diff --git a/apps/ui/src/networks/evm/actions.ts b/apps/ui/src/networks/evm/actions.ts
index 59ba5dde8..d3f98db46 100644
--- a/apps/ui/src/networks/evm/actions.ts
+++ b/apps/ui/src/networks/evm/actions.ts
@@ -347,7 +347,8 @@ export function createActions(
       connectorType: Connector,
       account: string,
       proposal: Proposal,
-      choice: Choice
+      choice: Choice,
+      reason: string
     ) => {
       await verifyNetwork(web3, chainId);
 
@@ -376,13 +377,16 @@ export function createActions(
         })
       );
 
+      let pinned: { cid: string; provider: string } | null = null;
+      if (reason) pinned = await helpers.pin({ reason });
+
       const data = {
         space: proposal.space.id,
         authenticator,
         strategies: strategiesWithMetadata,
         proposal: proposal.proposal_id as number,
         choice: getSdkChoice(choice),
-        metadataUri: '',
+        metadataUri: pinned ? `ipfs://${pinned.cid}` : '',
         chainId
       };
 
diff --git a/apps/ui/src/networks/offchain/actions.ts b/apps/ui/src/networks/offchain/actions.ts
index c51a0553c..d2778402e 100644
--- a/apps/ui/src/networks/offchain/actions.ts
+++ b/apps/ui/src/networks/offchain/actions.ts
@@ -139,7 +139,8 @@ export function createActions(
       connectorType: Connector,
       account: string,
       proposal: Proposal,
-      choice: Choice
+      choice: Choice,
+      reason: string
     ): Promise<any> {
       const data = {
         space: proposal.space.id,
@@ -149,7 +150,8 @@ export function createActions(
         authenticator: '',
         strategies: [],
         metadataUri: '',
-        privacy: proposal.privacy
+        privacy: proposal.privacy,
+        reason
       };
 
       return client.vote({
diff --git a/apps/ui/src/networks/starknet/actions.ts b/apps/ui/src/networks/starknet/actions.ts
index 9d58b400d..9530c2ed8 100644
--- a/apps/ui/src/networks/starknet/actions.ts
+++ b/apps/ui/src/networks/starknet/actions.ts
@@ -334,7 +334,8 @@ export function createActions(
       connectorType: Connector,
       account: string,
       proposal: Proposal,
-      choice: Choice
+      choice: Choice,
+      reason: string
     ) => {
       const isContract = await getIsContract(connectorType, account);
 
@@ -365,12 +366,16 @@ export function createActions(
         })
       );
 
+      let pinned: { cid: string; provider: string } | null = null;
+      pinned = await helpers.pin({ reason });
+
       const data = {
         space: proposal.space.id,
         authenticator,
         strategies: strategiesWithMetadata,
         proposal: proposal.proposal_id as number,
-        choice: getSdkChoice(choice)
+        choice: getSdkChoice(choice),
+        metadataUri: pinned ? `ipfs://${pinned.cid}` : ''
       };
 
       if (relayerType === 'starknet') {
diff --git a/apps/ui/src/networks/types.ts b/apps/ui/src/networks/types.ts
index f4abe9186..30a5229cf 100644
--- a/apps/ui/src/networks/types.ts
+++ b/apps/ui/src/networks/types.ts
@@ -127,7 +127,8 @@ export type ReadOnlyNetworkActions = {
     connectorType: Connector,
     account: string,
     proposal: Proposal,
-    choice: Choice
+    choice: Choice,
+    metadataCid?: string
   ): Promise<any>;
   followSpace(web3: Web3Provider | Wallet, networkId: NetworkID, spaceId: string, from?: string);
   unfollowSpace(web3: Web3Provider | Wallet, networkId: NetworkID, spaceId: string, from?: string);
diff --git a/apps/ui/src/stores/votingPowers.ts b/apps/ui/src/stores/votingPowers.ts
new file mode 100644
index 000000000..d27ea72de
--- /dev/null
+++ b/apps/ui/src/stores/votingPowers.ts
@@ -0,0 +1,92 @@
+import { defineStore } from 'pinia';
+import { utils } from '@snapshot-labs/sx';
+import { getNetwork, supportsNullCurrent } from '@/networks';
+import type { Proposal, Space } from '@/types';
+import type { VotingPower, VotingPowerStatus } from '@/networks/types';
+
+type VotingPowerItem = {
+  votingPowers: VotingPower[];
+  totalVotingPower: bigint;
+  status: VotingPowerStatus;
+  symbol: string;
+  decimals: number;
+  error: utils.errors.VotingPowerDetailsError | null;
+};
+
+export const useVotingPowersStore = defineStore('votingPowers', () => {
+  const { getCurrent } = useMetaStore();
+
+  const votingPowers = reactive<Map<string, VotingPowerItem>>(new Map());
+
+  function getIndex(space: Space, block: string | number) {
+    return `${space.id}:${block}`;
+  }
+
+  function get(space: Space, block: string | number = 'latest') {
+    return votingPowers.get(getIndex(space, block));
+  }
+
+  async function fetch(item: Space | Proposal, account: string, block: string | number = 'latest') {
+    const space: Space = 'space' in item ? (item.space as Space) : item;
+
+    const existingVotingPower = get(space, block);
+    if (existingVotingPower && existingVotingPower.status === 'success') return;
+
+    const network = getNetwork(item.network);
+
+    let vpItem: VotingPowerItem = {
+      status: 'loading',
+      votingPowers: [],
+      totalVotingPower: 0n,
+      decimals: 18,
+      symbol: space.voting_power_symbol,
+      error: null
+    };
+
+    if (existingVotingPower) {
+      existingVotingPower.status = 'loading';
+      votingPowers.set(getIndex(space, block), existingVotingPower);
+    }
+
+    try {
+      const vp = await network.actions.getVotingPower(
+        space.id,
+        item.strategies,
+        item.strategies_params,
+        space.strategies_parsed_metadata,
+        account,
+        {
+          at: supportsNullCurrent(item.network) ? null : getCurrent(item.network) || 0,
+          chainId: space.snapshot_chain_id
+        }
+      );
+
+      vpItem = {
+        ...vpItem,
+        votingPowers: vp,
+        totalVotingPower: vp.reduce((acc, b) => acc + b.value, 0n),
+        status: 'success',
+        decimals: Math.max(...vp.map(votingPower => votingPower.decimals), 0)
+      };
+    } catch (e: unknown) {
+      if (e instanceof utils.errors.VotingPowerDetailsError) {
+        vpItem.error = e;
+      } else {
+        console.warn('Failed to load voting power', e);
+      }
+
+      vpItem.status = 'error';
+    }
+    votingPowers.set(getIndex(space, block), vpItem);
+  }
+
+  function reset() {
+    votingPowers.clear();
+  }
+
+  return {
+    get,
+    fetch,
+    reset
+  };
+});
diff --git a/apps/ui/src/views/Editor.vue b/apps/ui/src/views/Editor.vue
index 6dcd5c7c8..a583ccd33 100644
--- a/apps/ui/src/views/Editor.vue
+++ b/apps/ui/src/views/Editor.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getNetwork, supportsNullCurrent } from '@/networks';
+import { getNetwork } from '@/networks';
 import { compareAddresses, omit } from '@/helpers/utils';
 import { CHAIN_IDS } from '@/helpers/constants';
 import { validateForm } from '@/helpers/validation';
@@ -37,22 +37,20 @@ const { resolved, address, networkId } = useResolve(param);
 const route = useRoute();
 const router = useRouter();
 const { propose, updateProposal } = useActions();
-const { web3 } = useWeb3();
+const { web3, authInitiated } = useWeb3();
 const {
   spaceKey,
   network: walletConnectNetwork,
   transaction,
   reset
 } = useWalletConnectTransaction();
-const { getCurrent } = useMetaStore();
 const spacesStore = useSpacesStore();
 const proposalsStore = useProposalsStore();
+const { votingPower, fetch: fetchVotingPower, hasProposeVp } = useVotingPower();
 
 const modalOpen = ref(false);
 const previewEnabled = ref(false);
 const sending = ref(false);
-const fetchingVotingPower = ref(true);
-const votingPowerValid = ref(false);
 
 const network = computed(() => (networkId.value ? getNetwork(networkId.value) : null));
 const space = computed(() => {
@@ -172,11 +170,7 @@ const formErrors = computed(() => {
   );
 });
 const canSubmit = computed(() => {
-  return (
-    !fetchingVotingPower.value &&
-    votingPowerValid.value &&
-    Object.keys(formErrors.value).length === 0
-  );
+  return hasProposeVp.value && Object.keys(formErrors.value).length === 0;
 });
 
 async function handleProposeClick() {
@@ -237,32 +231,8 @@ function handleTransactionAccept() {
   reset();
 }
 
-async function getVotingPower() {
-  if (!space.value || !web3.value.account) return;
-
-  fetchingVotingPower.value = true;
-  try {
-    const network = getNetwork(space.value.network);
-
-    const votingPowers = await network.actions.getVotingPower(
-      space.value.id,
-      space.value.voting_power_validation_strategy_strategies,
-      space.value.voting_power_validation_strategy_strategies_params,
-      space.value.voting_power_validation_strategies_parsed_metadata,
-      web3.value.account,
-      {
-        at: supportsNullCurrent(space.value.network) ? null : getCurrent(space.value.network) || 0,
-        chainId: space.value.snapshot_chain_id
-      }
-    );
-
-    const currentVotingPower = votingPowers.reduce((a, b) => a + b.value, 0n);
-    votingPowerValid.value = currentVotingPower >= BigInt(space.value.proposal_threshold);
-  } catch (e) {
-    console.warn('Failed to load voting power', e);
-  } finally {
-    fetchingVotingPower.value = false;
-  }
+function handleFetchVotingPower() {
+  space.value && fetchVotingPower(space.value);
 }
 
 watch(
@@ -274,7 +244,16 @@ watch(
   },
   { immediate: true }
 );
-watch([space, () => web3.value.account], () => getVotingPower());
+
+watch(
+  [space, () => web3.value.account, () => authInitiated.value],
+  ([toSpace, toAccount, authInitiated]) => {
+    if (!toSpace || !proposal.value || !authInitiated) return;
+
+    handleFetchVotingPower();
+  }
+);
+
 watch(proposalData, () => {
   if (!proposal.value) return;
 
@@ -345,7 +324,7 @@ export default defineComponent({
           </UiButton>
           <UiButton
             class="rounded-l-none border-l-0 float-left !m-0 !px-3"
-            :loading="sending || (web3.account !== '' && fetchingVotingPower)"
+            :loading="sending || !votingPower || votingPower.status === 'loading'"
             :disabled="!canSubmit"
             @click="handleProposeClick"
           >
@@ -360,9 +339,14 @@ export default defineComponent({
     </nav>
     <div class="md:mr-[340px]">
       <UiContainer class="pt-5 !max-w-[660px] mx-0 md:mx-auto s-box">
-        <UiAlert v-if="!fetchingVotingPower && !votingPowerValid" type="error" class="mb-4">
-          You do not have enough voting power to create proposal in this space.
-        </UiAlert>
+        <MessageVotingPower
+          v-if="votingPower && space"
+          class="mb-4"
+          :voting-power="votingPower"
+          :min-proposal-threshold="BigInt(space.proposal_threshold)"
+          @fetch-voting-power="handleFetchVotingPower"
+        />
+
         <UiInputString
           :key="proposalKey || ''"
           v-model="proposal.title"
diff --git a/apps/ui/src/views/Proposal.vue b/apps/ui/src/views/Proposal.vue
index 05113dfa9..b7ede27ec 100644
--- a/apps/ui/src/views/Proposal.vue
+++ b/apps/ui/src/views/Proposal.vue
@@ -1,26 +1,22 @@
 <script setup lang="ts">
-import { utils } from '@snapshot-labs/sx';
-import { getNetwork, offchainNetworks } from '@/networks';
-import { getStampUrl, getCacheHash, sanitizeUrl } from '@/helpers/utils';
-import { Choice } from '@/types';
-import { VotingPower, VotingPowerStatus } from '@/networks/types';
+import { offchainNetworks } from '@/networks';
+import { getStampUrl, getCacheHash, sanitizeUrl, getFormattedVotingPower } from '@/helpers/utils';
+import type { Choice } from '@/types';
 
 const route = useRoute();
+const proposalsStore = useProposalsStore();
+const { votingPower, fetch: fetchVotingPower, reset: resetVotingPower } = useVotingPower();
 const { setFavicon } = useFavicon();
 const { param } = useRouteParser('space');
 const { resolved, address: spaceAddress, networkId } = useResolve(param);
 const { setTitle } = useTitle();
-const proposalsStore = useProposalsStore();
 const { web3 } = useWeb3();
 const { loadVotes } = useAccount();
-const { vote } = useActions();
+const { modalAccountOpen } = useModal();
 
-const sendingType = ref<Choice | null>(null);
-const votingPowers = ref([] as VotingPower[]);
-const votingPowerStatus = ref<VotingPowerStatus>('loading');
-const votingPowerDetailsError = ref<utils.errors.VotingPowerDetailsError | null>(null);
+const modalOpenVote = ref(false);
+const selectedChoice = ref<Choice | null>(null);
 
-const network = computed(() => (networkId.value ? getNetwork(networkId.value) : null));
 const id = computed(() => route.params.id as string);
 const proposal = computed(() => {
   if (!resolved.value || !spaceAddress.value || !networkId.value) {
@@ -44,60 +40,44 @@ const votingPowerDecimals = computed(() => {
   );
 });
 
-async function getVotingPower() {
-  if (!network.value) return;
+async function handleVoteClick(choice: Choice) {
+  if (!web3.value.account) return (modalAccountOpen.value = true);
 
-  votingPowerDetailsError.value = null;
+  selectedChoice.value = choice;
+  modalOpenVote.value = true;
+}
 
-  if (!web3.value.account || !proposal.value) {
-    votingPowers.value = [];
-    votingPowerStatus.value = 'success';
-    return;
-  }
+async function handleVoteSubmitted() {
+  if (!proposal.value) return;
 
-  votingPowerStatus.value = 'loading';
-  try {
-    votingPowers.value = await network.value.actions.getVotingPower(
-      proposal.value.space.id,
-      proposal.value.strategies,
-      proposal.value.strategies_params,
-      proposal.value.space.strategies_parsed_metadata,
-      web3.value.account,
-      {
-        at: proposal.value.state === 'pending' ? null : proposal.value.snapshot,
-        chainId: proposal.value.space.snapshot_chain_id
-      }
-    );
-    votingPowerStatus.value = 'success';
-  } catch (e: unknown) {
-    if (e instanceof utils.errors.VotingPowerDetailsError) {
-      votingPowerDetailsError.value = e;
-    } else {
-      console.warn('Failed to load voting power', e);
-    }
+  selectedChoice.value = null;
 
-    votingPowers.value = [];
-    votingPowerStatus.value = 'error';
+  // TODO: Quick fix only for offchain proposals, need a more complete solution for onchain proposals
+  if (offchainNetworks.includes(proposal.value.network)) {
+    proposalsStore.fetchProposal(spaceAddress.value!, id.value, networkId.value!);
   }
 }
 
-async function handleVoteClick(choice: Choice) {
+function handleFetchVotingPower() {
   if (!proposal.value) return;
 
-  sendingType.value = choice;
+  fetchVotingPower(proposal.value);
+}
 
-  try {
-    await vote(proposal.value, choice);
-    // TODO: Quick fix only for offchain proposals, need a more complete solution for onchain proposals
-    if (offchainNetworks.includes(proposal.value.network)) {
-      proposalsStore.fetchProposal(spaceAddress.value!, id.value, networkId.value!);
+watch(
+  [proposal, () => web3.value.account, () => web3.value.authLoading],
+  ([toProposal, toAccount, toAuthLoading], [, fromAccount, , ,]) => {
+    if (fromAccount && toAccount && fromAccount !== toAccount) {
+      resetVotingPower();
     }
-  } finally {
-    sendingType.value = null;
-  }
-}
 
-watch([() => web3.value.account, proposal], () => getVotingPower());
+    if (toAuthLoading || !toProposal || !toAccount) return;
+
+    handleFetchVotingPower();
+  },
+  { immediate: true }
+);
+
 watch(
   [networkId, spaceAddress, id],
   async ([networkId, spaceAddress, id]) => {
@@ -176,16 +156,15 @@ watchEffect(() => {
             v-if="web3.account && networkId"
             v-slot="props"
             :network-id="networkId"
-            :status="votingPowerStatus"
-            :voting-power-symbol="proposal.space.voting_power_symbol"
-            :voting-powers="votingPowers"
+            :voting-power="votingPower"
             class="mb-2 flex items-center"
-            @get-voting-power="getVotingPower"
+            @fetch-voting-power="handleFetchVotingPower"
           >
             <div
               v-if="
-                votingPowerDetailsError?.details === 'NOT_READY_YET' &&
-                ['evmSlotValue', 'ozVotesStorageProof'].includes(votingPowerDetailsError.source)
+                votingPower &&
+                votingPower.error?.details === 'NOT_READY_YET' &&
+                ['evmSlotValue', 'ozVotesStorageProof'].includes(votingPower.error.source)
               "
             >
               <span class="inline-flex align-top h-[27px] items-center">
@@ -196,15 +175,17 @@ watchEffect(() => {
             <template v-else>
               <span class="mr-1.5">Voting power:</span>
               <a @click="props.onClick">
-                <UiLoading v-if="votingPowerStatus === 'loading'" />
+                <UiLoading v-if="!votingPower || votingPower.status === 'loading'" />
                 <IH-exclamation
-                  v-else-if="votingPowerStatus === 'error'"
+                  v-else-if="votingPower.status === 'error'"
                   class="inline-block text-rose-500"
                 />
-                <span v-else class="text-skin-link" v-text="props.formattedVotingPower" />
+                <span v-else class="text-skin-link" v-text="getFormattedVotingPower(votingPower)" />
               </a>
               <a
-                v-if="votingPowerStatus === 'success' && props.votingPower === BigInt(0)"
+                v-if="
+                  votingPower?.status === 'success' && votingPower.totalVotingPower === BigInt(0)
+                "
                 href="https://help.snapshot.org/en/articles/9566904-why-do-i-have-0-voting-power"
                 target="_blank"
                 class="ml-1.5"
@@ -214,33 +195,25 @@ watchEffect(() => {
             </template>
           </IndicatorVotingPower>
           <ProposalVote v-if="proposal" :proposal="proposal">
-            <ProposalVoteBasic
-              v-if="proposal.type === 'basic'"
-              :sending-type="sendingType"
-              @vote="handleVoteClick"
-            />
+            <ProposalVoteBasic v-if="proposal.type === 'basic'" @vote="handleVoteClick" />
             <ProposalVoteSingleChoice
               v-else-if="proposal.type === 'single-choice'"
               :proposal="proposal"
-              :sending-type="sendingType"
               @vote="handleVoteClick"
             />
             <ProposalVoteApproval
               v-else-if="proposal.type === 'approval'"
               :proposal="proposal"
-              :sending-type="sendingType"
               @vote="handleVoteClick"
             />
             <ProposalVoteRankedChoice
               v-else-if="proposal.type === 'ranked-choice'"
               :proposal="proposal"
-              :sending-type="sendingType"
               @vote="handleVoteClick"
             />
             <ProposalVoteWeighted
               v-else-if="['weighted', 'quadratic'].includes(proposal.type)"
               :proposal="proposal"
-              :sending-type="sendingType"
               @vote="handleVoteClick"
             />
           </ProposalVote>
@@ -255,5 +228,15 @@ watchEffect(() => {
         </div>
       </div>
     </template>
+    <teleport to="#modal">
+      <ModalVote
+        v-if="proposal && selectedChoice"
+        :choice="selectedChoice"
+        :proposal="proposal"
+        :open="modalOpenVote"
+        @close="modalOpenVote = false"
+        @voted="handleVoteSubmitted"
+      />
+    </teleport>
   </div>
 </template>
diff --git a/apps/ui/src/views/Space/Proposals.vue b/apps/ui/src/views/Space/Proposals.vue
index a75644be2..e494525ce 100644
--- a/apps/ui/src/views/Space/Proposals.vue
+++ b/apps/ui/src/views/Space/Proposals.vue
@@ -1,18 +1,15 @@
 <script setup lang="ts">
 import ProposalIconStatus from '@/components/ProposalIconStatus.vue';
-import { getNetwork, supportsNullCurrent } from '@/networks';
 import { Space } from '@/types';
-import { ProposalsFilter, VotingPower, VotingPowerStatus } from '@/networks/types';
+import { ProposalsFilter } from '@/networks/types';
 
 const props = defineProps<{ space: Space }>();
 
 const { setTitle } = useTitle();
+const { votingPower, fetch: fetchVotingPower, reset: resetVotingPower } = useVotingPower();
 const { web3 } = useWeb3();
-const { getCurrent } = useMetaStore();
 const proposalsStore = useProposalsStore();
 
-const votingPowers = ref([] as VotingPower[]);
-const votingPowerStatus = ref<VotingPowerStatus>('loading');
 const state = ref<NonNullable<ProposalsFilter['state']>>('any');
 
 const selectIconBaseProps = {
@@ -20,7 +17,6 @@ const selectIconBaseProps = {
   height: 16
 };
 
-const network = computed(() => getNetwork(props.space.network));
 const proposalsRecord = computed(
   () => proposalsStore.proposals[`${props.space.network}:${props.space.id}`]
 );
@@ -31,32 +27,8 @@ async function handleEndReached() {
   proposalsStore.fetchMore(props.space.id, props.space.network);
 }
 
-async function getVotingPower() {
-  if (!web3.value.account) {
-    votingPowers.value = [];
-    votingPowerStatus.value = 'success';
-    return;
-  }
-
-  votingPowerStatus.value = 'loading';
-  try {
-    votingPowers.value = await network.value.actions.getVotingPower(
-      props.space.id,
-      props.space.strategies,
-      props.space.strategies_params,
-      props.space.strategies_parsed_metadata,
-      web3.value.account,
-      {
-        at: supportsNullCurrent(props.space.network) ? null : getCurrent(props.space.network) || 0,
-        chainId: props.space.snapshot_chain_id
-      }
-    );
-    votingPowerStatus.value = 'success';
-  } catch (e) {
-    console.warn('Failed to load voting power', e);
-    votingPowers.value = [];
-    votingPowerStatus.value = 'error';
-  }
+function handleFetchVotingPower() {
+  fetchVotingPower(props.space);
 }
 
 watch(
@@ -66,17 +38,22 @@ watch(
       proposalsStore.reset(toSpace.id, toSpace.network);
       proposalsStore.fetch(toSpace.id, toSpace.network, toState);
     }
-
-    if (toSpace.id !== fromSpace?.id) {
-      getVotingPower();
-    }
   },
   { immediate: true }
 );
 
 watch(
-  () => web3.value.account,
-  () => getVotingPower()
+  [props.space, () => web3.value.account, () => web3.value.authLoading],
+  ([toSpace, toAccount, toAuthLoading], [, fromAccount, , ,]) => {
+    if (fromAccount && toAccount && fromAccount !== toAccount) {
+      resetVotingPower();
+    }
+
+    if (toAuthLoading || !toSpace || !toAccount) return;
+
+    handleFetchVotingPower();
+  },
+  { immediate: true }
 );
 
 watchEffect(() => setTitle(`Proposals - ${props.space.name}`));
@@ -120,10 +97,8 @@ watchEffect(() => setTitle(`Proposals - ${props.space.name}`));
       <div class="flex flex-row p-4 space-x-2">
         <IndicatorVotingPower
           :network-id="space.network"
-          :status="votingPowerStatus"
-          :voting-power-symbol="space.voting_power_symbol"
-          :voting-powers="votingPowers"
-          @get-voting-power="getVotingPower"
+          :voting-power="votingPower"
+          @fetch-voting-power="handleFetchVotingPower"
         />
         <router-link :to="{ name: 'editor' }">
           <UiTooltip title="New proposal">
diff --git a/packages/sx.js/src/clients/offchain/ethereum-sig/index.ts b/packages/sx.js/src/clients/offchain/ethereum-sig/index.ts
index 9cf937173..4a7e5cd40 100644
--- a/packages/sx.js/src/clients/offchain/ethereum-sig/index.ts
+++ b/packages/sx.js/src/clients/offchain/ethereum-sig/index.ts
@@ -220,7 +220,7 @@ export class EthereumSig {
       space: data.space,
       proposal: data.proposal,
       choice,
-      reason: '',
+      reason: data.reason || '',
       app: '',
       metadata: ''
     };
diff --git a/packages/sx.js/src/clients/offchain/types.ts b/packages/sx.js/src/clients/offchain/types.ts
index 9cdc9ed4d..502b8f6ce 100644
--- a/packages/sx.js/src/clients/offchain/types.ts
+++ b/packages/sx.js/src/clients/offchain/types.ts
@@ -141,6 +141,7 @@ export type Vote = {
   type: string;
   privacy?: Privacy;
   timestamp?: number;
+  reason?: string;
 };
 
 export type Propose = {
diff --git a/packages/sx.js/src/clients/starknet/ethereum-sig/index.ts b/packages/sx.js/src/clients/starknet/ethereum-sig/index.ts
index 22651378c..54f8f3d73 100644
--- a/packages/sx.js/src/clients/starknet/ethereum-sig/index.ts
+++ b/packages/sx.js/src/clients/starknet/ethereum-sig/index.ts
@@ -154,7 +154,9 @@ export class EthereumSig {
       proposalId: `0x${data.proposal.toString(16)}`,
       choice: `0x${data.choice.toString(16)}`,
       userVotingStrategies,
-      metadataUri: shortString.splitLongString('').map(str => shortString.encodeShortString(str))
+      metadataUri: shortString
+        .splitLongString(data.metadataUri)
+        .map(str => shortString.encodeShortString(str))
     };
 
     const signatureData = await this.sign(signer, message, voteTypes, 'Vote');
diff --git a/packages/sx.js/src/clients/starknet/starknet-sig/index.ts b/packages/sx.js/src/clients/starknet/starknet-sig/index.ts
index 24d55cfba..6f8805715 100644
--- a/packages/sx.js/src/clients/starknet/starknet-sig/index.ts
+++ b/packages/sx.js/src/clients/starknet/starknet-sig/index.ts
@@ -188,7 +188,9 @@ export class StarknetSig {
       proposalId: uint256.bnToUint256(data.proposal),
       choice: `0x${data.choice.toString(16)}`,
       userVotingStrategies,
-      metadataUri: shortString.splitLongString('').map(str => shortString.encodeShortString(str))
+      metadataUri: shortString
+        .splitLongString(data.metadataUri)
+        .map(str => shortString.encodeShortString(str))
     };
 
     const signatureData = await this.sign(signer, data.authenticator, message, voteTypes, 'Vote');
diff --git a/packages/sx.js/src/clients/starknet/starknet-tx/index.ts b/packages/sx.js/src/clients/starknet/starknet-tx/index.ts
index 29b28fd88..7e9f3fd7c 100644
--- a/packages/sx.js/src/clients/starknet/starknet-tx/index.ts
+++ b/packages/sx.js/src/clients/starknet/starknet-tx/index.ts
@@ -264,7 +264,7 @@ export class StarknetTx {
       proposalId: envelope.data.proposal,
       choice: envelope.data.choice,
       votingStrategies,
-      metadataUri: ''
+      metadataUri: envelope.data.metadataUri
     });
 
     const maxFee = opts?.nonce
diff --git a/packages/sx.js/src/types/index.ts b/packages/sx.js/src/types/index.ts
index 4b732dae8..1e7274b9e 100644
--- a/packages/sx.js/src/types/index.ts
+++ b/packages/sx.js/src/types/index.ts
@@ -129,6 +129,7 @@ export type Vote = {
   strategies: StrategyConfig[];
   proposal: number;
   choice: Choice;
+  metadataUri: string;
 };
 
 export type Message = Propose | Vote | UpdateProposal;
diff --git a/packages/sx.js/test/unit/clients/starknet/ethereum-sig/__snapshots__/index.test.ts.snap b/packages/sx.js/test/unit/clients/starknet/ethereum-sig/__snapshots__/index.test.ts.snap
index 2865e2c0c..e61f6fac9 100644
--- a/packages/sx.js/test/unit/clients/starknet/ethereum-sig/__snapshots__/index.test.ts.snap
+++ b/packages/sx.js/test/unit/clients/starknet/ethereum-sig/__snapshots__/index.test.ts.snap
@@ -100,6 +100,7 @@ exports[`EthereumSig > should create vote envelope 1`] = `
   "data": {
     "authenticator": "0x53d98050a9738da0eac7498d909ea03f6eb03d07fb95877b54ff8acf7712276",
     "choice": 1,
+    "metadataUri": "",
     "proposal": 1,
     "space": "0x06330d3e48f59f5411c201ee2e9e9ccdc738fb3bb192b0e77e4eda26fa1a22f8",
     "strategies": [
diff --git a/packages/sx.js/test/unit/clients/starknet/ethereum-sig/index.test.ts b/packages/sx.js/test/unit/clients/starknet/ethereum-sig/index.test.ts
index 1579e1677..b5cf2c65d 100644
--- a/packages/sx.js/test/unit/clients/starknet/ethereum-sig/index.test.ts
+++ b/packages/sx.js/test/unit/clients/starknet/ethereum-sig/index.test.ts
@@ -82,6 +82,7 @@ describe('EthereumSig', () => {
             index: 0
           }
         ],
+        metadataUri: '',
         proposal: 1,
         choice: 1
       }
diff --git a/packages/sx.js/test/unit/clients/starknet/ethereum-tx/index.test.ts b/packages/sx.js/test/unit/clients/starknet/ethereum-tx/index.test.ts
index 1fd4c7351..871b699e9 100644
--- a/packages/sx.js/test/unit/clients/starknet/ethereum-tx/index.test.ts
+++ b/packages/sx.js/test/unit/clients/starknet/ethereum-tx/index.test.ts
@@ -51,7 +51,8 @@ describe('EthereumTx', () => {
         }
       ],
       proposal: 32,
-      choice: 1
+      choice: 1,
+      metadataUri: 'ipfs://QmNrm6xKuib1THtWkiN5CKtBEerQCDpUtmgDqiaU2xDmca'
     };
 
     const result = await ethereumTx.getVoteHash(wallet, data);
diff --git a/packages/sx.js/test/unit/clients/starknet/starknet-sig/__snapshots__/index.test.ts.snap b/packages/sx.js/test/unit/clients/starknet/starknet-sig/__snapshots__/index.test.ts.snap
index 66be378af..2bae4b216 100644
--- a/packages/sx.js/test/unit/clients/starknet/starknet-sig/__snapshots__/index.test.ts.snap
+++ b/packages/sx.js/test/unit/clients/starknet/starknet-sig/__snapshots__/index.test.ts.snap
@@ -97,6 +97,7 @@ exports[`StarknetSig > should create vote envelope 1`] = `
   "data": {
     "authenticator": "0x213bb25044b189ccfda9882999dba32e011781dc11b2a6efa2b3d232824378e",
     "choice": 1,
+    "metadataUri": "ipfs://QmNrm6xKuib1THtWkiN5CKtBEerQCDpUtmgDqiaU2xDmca",
     "proposal": 1,
     "space": "0x06330d3e48f59f5411c201ee2e9e9ccdc738fb3bb192b0e77e4eda26fa1a22f8",
     "strategies": [
@@ -110,7 +111,10 @@ exports[`StarknetSig > should create vote envelope 1`] = `
     "address": "0x7d2f37b75a5e779f7da01c22acee1b66c39e8ba470ee5448f05e1462afcedb4",
     "message": {
       "choice": "0x1",
-      "metadataUri": [],
+      "metadataUri": [
+        "0x697066733a2f2f516d4e726d36784b75696231544874576b694e35434b7442",
+        "0x4565725143447055746d6744716961553278446d6361",
+      ],
       "proposalId": {
         "high": "0x0",
         "low": "0x1",
@@ -121,8 +125,8 @@ exports[`StarknetSig > should create vote envelope 1`] = `
     },
     "primaryType": "Vote",
     "signature": [
-      "0x155b32bbfbb261e29f97dfae43b5423f1a205eb1ef26680e7edf1758453d63a",
-      "0x5da6c03b40c281be8686afd2d985db93fc3fc27e4c8a2856ba7c635ebf1b2d6",
+      "0xd64cf8eb4218e6b47ab1756ab850b82b5bb9eec760c8cd0c1b68bb2ea597be",
+      "0x56a47d37a6980a7f095ac54b5ce5108325333c7642234fc677423a59a027e38",
     ],
   },
 }
diff --git a/packages/sx.js/test/unit/clients/starknet/starknet-sig/index.test.ts b/packages/sx.js/test/unit/clients/starknet/starknet-sig/index.test.ts
index 243ada1d0..0108d4b6e 100644
--- a/packages/sx.js/test/unit/clients/starknet/starknet-sig/index.test.ts
+++ b/packages/sx.js/test/unit/clients/starknet/starknet-sig/index.test.ts
@@ -81,6 +81,7 @@ describe('StarknetSig', () => {
             index: 0
           }
         ],
+        metadataUri: 'ipfs://QmNrm6xKuib1THtWkiN5CKtBEerQCDpUtmgDqiaU2xDmca',
         proposal: 1,
         choice: 1
       }

From 4a933a4f0459f08b7370048ff22f30f09c31b21a Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Sat, 20 Jul 2024 14:01:26 +0900
Subject: [PATCH 02/30] fix: update voting power fetching

---
 apps/ui/src/composables/useVotingPower.ts | 25 ++++++++++++++++++-----
 apps/ui/src/stores/votingPowers.ts        | 16 +++++++--------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/apps/ui/src/composables/useVotingPower.ts b/apps/ui/src/composables/useVotingPower.ts
index 7af8ac67f..0c95b373a 100644
--- a/apps/ui/src/composables/useVotingPower.ts
+++ b/apps/ui/src/composables/useVotingPower.ts
@@ -1,21 +1,30 @@
+import { supportsNullCurrent } from '@/networks';
 import type { Space, Proposal } from '@/types';
 
 export function useVotingPower() {
-  const { web3 } = useWeb3();
   const votingPowersStore = useVotingPowersStore();
+  const { web3 } = useWeb3();
+  const { getCurrent } = useMetaStore();
 
   const item = ref<Space | Proposal | undefined>();
+  const block = ref<number | null>(null);
 
   const space = computed(() =>
     item.value && 'space' in item.value ? (item.value?.space as Space) : item.value
   );
 
-  const snapshot = computed(() =>
-    item.value && 'snapshot' in item.value ? item.value.snapshot : undefined
+  const proposal = computed(() =>
+    item.value && 'snapshot' in item.value ? (item.value as Proposal) : undefined
   );
 
+  const proposalSnapshot = computed(() => {
+    if (!proposal.value) return null;
+
+    return proposal.value.state === 'pending' ? null : proposal.value.snapshot;
+  });
+
   const votingPower = computed(
-    () => space.value && votingPowersStore.get(space.value, snapshot.value)
+    () => space.value && votingPowersStore.get(space.value, block.value)
   );
 
   const hasVoteVp = computed(
@@ -30,6 +39,10 @@ export function useVotingPower() {
       false
   );
 
+  function latestBlock(space: Space) {
+    return supportsNullCurrent(space.network) ? null : getCurrent(space.network) ?? 0;
+  }
+
   function reset() {
     votingPowersStore.reset();
   }
@@ -38,7 +51,9 @@ export function useVotingPower() {
     if (!web3.value.account) return;
 
     item.value = spaceOrProposal;
-    votingPowersStore.fetch(item.value, web3.value.account, snapshot.value);
+    block.value = proposal.value ? proposalSnapshot.value : latestBlock(space.value as Space);
+
+    votingPowersStore.fetch(item.value, web3.value.account, block.value);
   }
 
   watch(
diff --git a/apps/ui/src/stores/votingPowers.ts b/apps/ui/src/stores/votingPowers.ts
index d27ea72de..36eb03545 100644
--- a/apps/ui/src/stores/votingPowers.ts
+++ b/apps/ui/src/stores/votingPowers.ts
@@ -1,9 +1,11 @@
 import { defineStore } from 'pinia';
 import { utils } from '@snapshot-labs/sx';
-import { getNetwork, supportsNullCurrent } from '@/networks';
+import { getNetwork } from '@/networks';
 import type { Proposal, Space } from '@/types';
 import type { VotingPower, VotingPowerStatus } from '@/networks/types';
 
+const LATEST_BLOCK_NAME = 'latest';
+
 type VotingPowerItem = {
   votingPowers: VotingPower[];
   totalVotingPower: bigint;
@@ -14,19 +16,17 @@ type VotingPowerItem = {
 };
 
 export const useVotingPowersStore = defineStore('votingPowers', () => {
-  const { getCurrent } = useMetaStore();
-
   const votingPowers = reactive<Map<string, VotingPowerItem>>(new Map());
 
-  function getIndex(space: Space, block: string | number) {
-    return `${space.id}:${block}`;
+  function getIndex(space: Space, block: number | null): string {
+    return `${space.id}:${block ?? LATEST_BLOCK_NAME}`;
   }
 
-  function get(space: Space, block: string | number = 'latest') {
+  function get(space: Space, block: number | null): VotingPowerItem | undefined {
     return votingPowers.get(getIndex(space, block));
   }
 
-  async function fetch(item: Space | Proposal, account: string, block: string | number = 'latest') {
+  async function fetch(item: Space | Proposal, account: string, block: number | null) {
     const space: Space = 'space' in item ? (item.space as Space) : item;
 
     const existingVotingPower = get(space, block);
@@ -56,7 +56,7 @@ export const useVotingPowersStore = defineStore('votingPowers', () => {
         space.strategies_parsed_metadata,
         account,
         {
-          at: supportsNullCurrent(item.network) ? null : getCurrent(item.network) || 0,
+          at: block,
           chainId: space.snapshot_chain_id
         }
       );

From 2d6bfcc75a39152632fa9283e7b31c4485919e51 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Sat, 20 Jul 2024 16:19:51 +0900
Subject: [PATCH 03/30] fix: do not pin reason when empty

---
 apps/ui/src/networks/starknet/actions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/src/networks/starknet/actions.ts b/apps/ui/src/networks/starknet/actions.ts
index 9530c2ed8..32023633f 100644
--- a/apps/ui/src/networks/starknet/actions.ts
+++ b/apps/ui/src/networks/starknet/actions.ts
@@ -367,7 +367,7 @@ export function createActions(
       );
 
       let pinned: { cid: string; provider: string } | null = null;
-      pinned = await helpers.pin({ reason });
+      if (reason) pinned = await helpers.pin({ reason });
 
       const data = {
         space: proposal.space.id,

From 36354822dbf8591c05524ab8d9332cdbe061ea13 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Thu, 25 Jul 2024 19:13:45 +0900
Subject: [PATCH 04/30] chore: lint fix

---
 apps/ui/src/components/MessageVotingPower.vue | 10 ++++++--
 apps/ui/src/components/Modal/Vote.vue         | 11 ++++++---
 .../src/components/ProposalVoteApproval.vue   |  6 ++++-
 .../components/ProposalVoteRankedChoice.vue   |  6 ++++-
 .../src/components/ProposalVoteWeighted.vue   |  6 ++++-
 apps/ui/src/components/ProposalsListItem.vue  |  6 ++++-
 apps/ui/src/composables/useVotingPower.ts     | 24 +++++++++++++------
 apps/ui/src/stores/votingPowers.ts            | 17 +++++++++----
 8 files changed, 65 insertions(+), 21 deletions(-)

diff --git a/apps/ui/src/components/MessageVotingPower.vue b/apps/ui/src/components/MessageVotingPower.vue
index 1ba3343c1..92bf72f19 100644
--- a/apps/ui/src/components/MessageVotingPower.vue
+++ b/apps/ui/src/components/MessageVotingPower.vue
@@ -33,8 +33,14 @@ const insufficientProposeVp = computed(
     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')">
+    <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>
diff --git a/apps/ui/src/components/Modal/Vote.vue b/apps/ui/src/components/Modal/Vote.vue
index 2f293a31a..d5bc9cb3b 100644
--- a/apps/ui/src/components/Modal/Vote.vue
+++ b/apps/ui/src/components/Modal/Vote.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { getChoiceText, getFormattedVotingPower } from '@/helpers/utils';
 import { validateForm } from '@/helpers/validation';
-import type { Choice, Proposal } from '@/types';
+import { Choice, Proposal } from '@/types';
 
 const definition = {
   type: 'object',
@@ -45,10 +45,15 @@ const form = ref<Record<string, string>>({ reason: '' });
 const formErrors = computed(() =>
   validateForm(definition, form.value, { skipEmptyOptionalFields: true })
 );
-const formattedVotingPower = computed(() => getFormattedVotingPower(votingPower.value));
+const formattedVotingPower = computed(() =>
+  getFormattedVotingPower(votingPower.value)
+);
 
 const canSubmit = computed(
-  () => !!props.choice && Object.keys(formErrors.value).length === 0 && hasVoteVp.value
+  () =>
+    !!props.choice &&
+    Object.keys(formErrors.value).length === 0 &&
+    hasVoteVp.value
 );
 
 async function handleSubmit() {
diff --git a/apps/ui/src/components/ProposalVoteApproval.vue b/apps/ui/src/components/ProposalVoteApproval.vue
index 8ef901f34..614991545 100644
--- a/apps/ui/src/components/ProposalVoteApproval.vue
+++ b/apps/ui/src/components/ProposalVoteApproval.vue
@@ -36,7 +36,11 @@ function toggleSelectedChoice(choice: number) {
         <IH-check v-if="selectedChoices.includes(index + 1)" class="shrink-0" />
       </UiButton>
     </div>
-    <UiButton primary class="!h-[48px] w-full" @click="emit('vote', selectedChoices)">
+    <UiButton
+      primary
+      class="!h-[48px] w-full"
+      @click="emit('vote', selectedChoices)"
+    >
       Vote
     </UiButton>
   </div>
diff --git a/apps/ui/src/components/ProposalVoteRankedChoice.vue b/apps/ui/src/components/ProposalVoteRankedChoice.vue
index 86bedf186..12a311c15 100644
--- a/apps/ui/src/components/ProposalVoteRankedChoice.vue
+++ b/apps/ui/src/components/ProposalVoteRankedChoice.vue
@@ -41,7 +41,11 @@ const selectedChoices = ref<number[]>(
         </UiButton>
       </template>
     </Draggable>
-    <UiButton primary class="!h-[48px] w-full" @click="emit('vote', selectedChoices)">
+    <UiButton
+      primary
+      class="!h-[48px] w-full"
+      @click="emit('vote', selectedChoices)"
+    >
       Vote
     </UiButton>
   </div>
diff --git a/apps/ui/src/components/ProposalVoteWeighted.vue b/apps/ui/src/components/ProposalVoteWeighted.vue
index f5ba268b5..b42c8aa18 100644
--- a/apps/ui/src/components/ProposalVoteWeighted.vue
+++ b/apps/ui/src/components/ProposalVoteWeighted.vue
@@ -81,7 +81,11 @@ watch(
         ></div>
       </div>
     </div>
-    <UiButton primary class="!h-[48px] w-full" @click="$emit('vote', selectedChoices)">
+    <UiButton
+      primary
+      class="!h-[48px] w-full"
+      @click="$emit('vote', selectedChoices)"
+    >
       Vote
     </UiButton>
   </div>
diff --git a/apps/ui/src/components/ProposalsListItem.vue b/apps/ui/src/components/ProposalsListItem.vue
index 89bc2bcfd..1e06fba44 100644
--- a/apps/ui/src/components/ProposalsListItem.vue
+++ b/apps/ui/src/components/ProposalsListItem.vue
@@ -133,7 +133,11 @@ const handleVoteClick = (choice: Choice) => {
             />
             <div v-else />
           </template>
-          <ProposalVoteBasic v-if="proposal.type === 'basic'" :size="40" @vote="handleVoteClick" />
+          <ProposalVoteBasic
+            v-if="proposal.type === 'basic'"
+            :size="40"
+            @vote="handleVoteClick"
+          />
         </ProposalVote>
       </div>
     </div>
diff --git a/apps/ui/src/composables/useVotingPower.ts b/apps/ui/src/composables/useVotingPower.ts
index 0c95b373a..6371081fc 100644
--- a/apps/ui/src/composables/useVotingPower.ts
+++ b/apps/ui/src/composables/useVotingPower.ts
@@ -1,5 +1,5 @@
 import { supportsNullCurrent } from '@/networks';
-import type { Space, Proposal } from '@/types';
+import { Proposal, Space } from '@/types';
 
 export function useVotingPower() {
   const votingPowersStore = useVotingPowersStore();
@@ -10,11 +10,15 @@ export function useVotingPower() {
   const block = ref<number | null>(null);
 
   const space = computed(() =>
-    item.value && 'space' in item.value ? (item.value?.space as Space) : item.value
+    item.value && 'space' in item.value
+      ? (item.value?.space as Space)
+      : item.value
   );
 
   const proposal = computed(() =>
-    item.value && 'snapshot' in item.value ? (item.value as Proposal) : undefined
+    item.value && 'snapshot' in item.value
+      ? (item.value as Proposal)
+      : undefined
   );
 
   const proposalSnapshot = computed(() => {
@@ -28,19 +32,23 @@ export function useVotingPower() {
   );
 
   const hasVoteVp = computed(
-    () => (votingPower.value && votingPower.value.totalVotingPower > 0n) || false
+    () =>
+      (votingPower.value && votingPower.value.totalVotingPower > 0n) || false
   );
 
   const hasProposeVp = computed(
     () =>
       (votingPower.value &&
         space.value &&
-        votingPower.value.totalVotingPower >= BigInt(space.value.proposal_threshold)) ||
+        votingPower.value.totalVotingPower >=
+          BigInt(space.value.proposal_threshold)) ||
       false
   );
 
   function latestBlock(space: Space) {
-    return supportsNullCurrent(space.network) ? null : getCurrent(space.network) ?? 0;
+    return supportsNullCurrent(space.network)
+      ? null
+      : getCurrent(space.network) ?? 0;
   }
 
   function reset() {
@@ -51,7 +59,9 @@ export function useVotingPower() {
     if (!web3.value.account) return;
 
     item.value = spaceOrProposal;
-    block.value = proposal.value ? proposalSnapshot.value : latestBlock(space.value as Space);
+    block.value = proposal.value
+      ? proposalSnapshot.value
+      : latestBlock(space.value as Space);
 
     votingPowersStore.fetch(item.value, web3.value.account, block.value);
   }
diff --git a/apps/ui/src/stores/votingPowers.ts b/apps/ui/src/stores/votingPowers.ts
index 36eb03545..b036f1bce 100644
--- a/apps/ui/src/stores/votingPowers.ts
+++ b/apps/ui/src/stores/votingPowers.ts
@@ -1,8 +1,8 @@
-import { defineStore } from 'pinia';
 import { utils } from '@snapshot-labs/sx';
+import { defineStore } from 'pinia';
 import { getNetwork } from '@/networks';
-import type { Proposal, Space } from '@/types';
-import type { VotingPower, VotingPowerStatus } from '@/networks/types';
+import { VotingPower, VotingPowerStatus } from '@/networks/types';
+import { Proposal, Space } from '@/types';
 
 const LATEST_BLOCK_NAME = 'latest';
 
@@ -22,11 +22,18 @@ export const useVotingPowersStore = defineStore('votingPowers', () => {
     return `${space.id}:${block ?? LATEST_BLOCK_NAME}`;
   }
 
-  function get(space: Space, block: number | null): VotingPowerItem | undefined {
+  function get(
+    space: Space,
+    block: number | null
+  ): VotingPowerItem | undefined {
     return votingPowers.get(getIndex(space, block));
   }
 
-  async function fetch(item: Space | Proposal, account: string, block: number | null) {
+  async function fetch(
+    item: Space | Proposal,
+    account: string,
+    block: number | null
+  ) {
     const space: Space = 'space' in item ? (item.space as Space) : item;
 
     const existingVotingPower = get(space, block);

From bbae3926c628641bd048dd5dc21e22243ec50a76 Mon Sep 17 00:00:00 2001
From: Wan <495709+wa0x6e@users.noreply.github.com>
Date: Thu, 1 Aug 2024 07:22:43 +0400
Subject: [PATCH 05/30] Update apps/ui/src/views/Proposal.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wiktor Tkaczyński <wiktor.tkaczynski@gmail.com>
---
 apps/ui/src/views/Proposal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/src/views/Proposal.vue b/apps/ui/src/views/Proposal.vue
index 82e721dec..383271281 100644
--- a/apps/ui/src/views/Proposal.vue
+++ b/apps/ui/src/views/Proposal.vue
@@ -85,7 +85,7 @@ function handleFetchVotingPower() {
 
 watch(
   [proposal, () => web3.value.account, () => web3.value.authLoading],
-  ([toProposal, toAccount, toAuthLoading], [, fromAccount, , ,]) => {
+  ([toProposal, toAccount, toAuthLoading], [, fromAccount]) => {
     if (fromAccount && toAccount && fromAccount !== toAccount) {
       resetVotingPower();
     }

From ae3f4b01a14a311ed77f2342d7714702c17aaadc Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Thu, 1 Aug 2024 12:50:12 +0900
Subject: [PATCH 06/30] fix(ui): improve disabled button UI

---
 apps/ui/src/components/Ui/Button.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/ui/src/components/Ui/Button.vue b/apps/ui/src/components/Ui/Button.vue
index fe1451972..f2f4ccefb 100644
--- a/apps/ui/src/components/Ui/Button.vue
+++ b/apps/ui/src/components/Ui/Button.vue
@@ -27,9 +27,9 @@ withDefaults(
   </button>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .button {
-  &:disabled {
+  &:disabled:deep() {
     color: rgba(var(--border)) !important;
     cursor: not-allowed;
   }
@@ -37,18 +37,18 @@ withDefaults(
   &.primary {
     @apply bg-skin-link text-skin-bg border-skin-link;
 
-    &:disabled {
-      @apply bg-skin-bg border-skin-border text-skin-text;
+    &:disabled:deep() {
+      @apply bg-skin-link/40 border-transparent;
 
       .loading,
       .loading.inverse {
         svg {
           path {
-            stroke: rgba(var(--border));
+            stroke: rgba(var(--primary));
           }
 
           stop {
-            stop-color: rgba(var(--border));
+            stop-color: rgba(var(--primary));
           }
         }
       }

From 2b6c70d6c28f5a146d80cd1b6cc9d1bd45f1921f Mon Sep 17 00:00:00 2001
From: Wan <495709+wa0x6e@users.noreply.github.com>
Date: Thu, 1 Aug 2024 07:51:04 +0400
Subject: [PATCH 07/30] Update apps/ui/src/components/ProposalsListItem.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wiktor Tkaczyński <wiktor.tkaczynski@gmail.com>
---
 apps/ui/src/components/ProposalsListItem.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/ui/src/components/ProposalsListItem.vue b/apps/ui/src/components/ProposalsListItem.vue
index 2823f0797..ad9a5c1c1 100644
--- a/apps/ui/src/components/ProposalsListItem.vue
+++ b/apps/ui/src/components/ProposalsListItem.vue
@@ -17,7 +17,10 @@ const selectedChoice = ref<Choice | null>(null);
 const totalProgress = computed(() => quorumProgress(props.proposal));
 
 const handleVoteClick = (choice: Choice) => {
-  if (!web3.value.account) return (modalAccountOpen.value = true);
+  if (!web3.value.account) {
+    modalAccountOpen.value = true;
+    return
+  }
 
   selectedChoice.value = choice;
   modalOpenVote.value = true;

From 7f57aceed08d47f402425fbb5e7760163493d5dc Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Fri, 2 Aug 2024 12:33:37 +0900
Subject: [PATCH 08/30] fix: improve typing

---
 apps/ui/src/stores/votingPowers.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/ui/src/stores/votingPowers.ts b/apps/ui/src/stores/votingPowers.ts
index b036f1bce..3124c4bd9 100644
--- a/apps/ui/src/stores/votingPowers.ts
+++ b/apps/ui/src/stores/votingPowers.ts
@@ -6,6 +6,7 @@ import { Proposal, Space } from '@/types';
 
 const LATEST_BLOCK_NAME = 'latest';
 
+type SpaceDetails = Proposal['space'];
 type VotingPowerItem = {
   votingPowers: VotingPower[];
   totalVotingPower: bigint;
@@ -18,12 +19,12 @@ type VotingPowerItem = {
 export const useVotingPowersStore = defineStore('votingPowers', () => {
   const votingPowers = reactive<Map<string, VotingPowerItem>>(new Map());
 
-  function getIndex(space: Space, block: number | null): string {
+  function getIndex(space: SpaceDetails, block: number | null): string {
     return `${space.id}:${block ?? LATEST_BLOCK_NAME}`;
   }
 
   function get(
-    space: Space,
+    space: SpaceDetails,
     block: number | null
   ): VotingPowerItem | undefined {
     return votingPowers.get(getIndex(space, block));
@@ -34,7 +35,7 @@ export const useVotingPowersStore = defineStore('votingPowers', () => {
     account: string,
     block: number | null
   ) {
-    const space: Space = 'space' in item ? (item.space as Space) : item;
+    const space = 'space' in item ? item.space : item;
 
     const existingVotingPower = get(space, block);
     if (existingVotingPower && existingVotingPower.status === 'success') return;

From b4768f76198f1c969597d3fbce4d09c81912c87b Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Fri, 2 Aug 2024 12:42:38 +0900
Subject: [PATCH 09/30] refactor: use same VotingPowerItem type

---
 apps/ui/src/components/IndicatorVotingPower.vue | 12 ++----------
 apps/ui/src/components/MessageVotingPower.vue   |  7 +++----
 apps/ui/src/components/Modal/VotingPower.vue    | 12 ++----------
 apps/ui/src/helpers/utils.ts                    |  7 ++-----
 apps/ui/src/stores/votingPowers.ts              |  2 +-
 5 files changed, 10 insertions(+), 30 deletions(-)

diff --git a/apps/ui/src/components/IndicatorVotingPower.vue b/apps/ui/src/components/IndicatorVotingPower.vue
index 07af9d694..97e7fef65 100644
--- a/apps/ui/src/components/IndicatorVotingPower.vue
+++ b/apps/ui/src/components/IndicatorVotingPower.vue
@@ -1,20 +1,12 @@
 <script setup lang="ts">
-import { utils } from '@snapshot-labs/sx';
 import { getFormattedVotingPower } from '@/helpers/utils';
 import { evmNetworks } from '@/networks';
-import { VotingPower, VotingPowerStatus } from '@/networks/types';
+import { VotingPowerItem } from '@/stores/votingPowers';
 import { NetworkID } from '@/types';
 
 const props = defineProps<{
   networkId: NetworkID;
-  votingPower?: {
-    totalVotingPower: bigint;
-    votingPowers: VotingPower[];
-    status: VotingPowerStatus;
-    symbol: string;
-    decimals: number;
-    error: utils.errors.VotingPowerDetailsError | null;
-  };
+  votingPower?: VotingPowerItem;
 }>();
 
 defineEmits<{
diff --git a/apps/ui/src/components/MessageVotingPower.vue b/apps/ui/src/components/MessageVotingPower.vue
index 92bf72f19..3d3b296ef 100644
--- a/apps/ui/src/components/MessageVotingPower.vue
+++ b/apps/ui/src/components/MessageVotingPower.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
+import { VotingPowerItem } from '@/stores/votingPowers';
+
 const props = defineProps<{
   minVotingPower?: bigint;
   minProposalThreshold?: bigint;
-  votingPower: {
-    status: string;
-    totalVotingPower: bigint;
-  };
+  votingPower: Pick<VotingPowerItem, 'status' | 'totalVotingPower'>;
 }>();
 
 defineEmits<{
diff --git a/apps/ui/src/components/Modal/VotingPower.vue b/apps/ui/src/components/Modal/VotingPower.vue
index b382ef668..688ebc73e 100644
--- a/apps/ui/src/components/Modal/VotingPower.vue
+++ b/apps/ui/src/components/Modal/VotingPower.vue
@@ -1,22 +1,14 @@
 <script setup lang="ts">
-import { utils } from '@snapshot-labs/sx';
 import { _n, shorten } from '@/helpers/utils';
 import { addressValidator as isValidAddress } from '@/helpers/validation';
 import { getNetwork } from '@/networks';
-import { VotingPower, VotingPowerStatus } from '@/networks/types';
+import { VotingPowerItem } from '@/stores/votingPowers';
 import { NetworkID } from '@/types';
 
 const props = defineProps<{
   open: boolean;
   networkId: NetworkID;
-  votingPower?: {
-    symbol: string;
-    totalVotingPower: bigint;
-    decimals: number;
-    votingPowers: VotingPower[];
-    status: VotingPowerStatus;
-    error: utils.errors.VotingPowerDetailsError | null;
-  };
+  votingPower?: VotingPowerItem;
 }>();
 
 defineEmits<{
diff --git a/apps/ui/src/helpers/utils.ts b/apps/ui/src/helpers/utils.ts
index 64ae2e7e2..7dc78149d 100644
--- a/apps/ui/src/helpers/utils.ts
+++ b/apps/ui/src/helpers/utils.ts
@@ -10,6 +10,7 @@ import updateLocale from 'dayjs/plugin/updateLocale';
 import sha3 from 'js-sha3';
 import { validateAndParseAddress } from 'starknet';
 import networks from '@/helpers/networks.json';
+import { VotingPowerItem } from '@/stores/votingPowers';
 import { Choice, Proposal, SpaceMetadata } from '@/types';
 import { MAX_SYMBOL_LENGTH } from './constants';
 import pkg from '@/../package.json';
@@ -538,11 +539,7 @@ export function getSocialNetworksLink(data: any) {
     .filter(social => social.href);
 }
 
-export function getFormattedVotingPower(votingPower?: {
-  totalVotingPower: bigint;
-  decimals: number;
-  symbol: string;
-}) {
+export function getFormattedVotingPower(votingPower?: VotingPowerItem) {
   if (!votingPower) return;
 
   const { totalVotingPower, decimals, symbol } = votingPower;
diff --git a/apps/ui/src/stores/votingPowers.ts b/apps/ui/src/stores/votingPowers.ts
index 3124c4bd9..6100ca469 100644
--- a/apps/ui/src/stores/votingPowers.ts
+++ b/apps/ui/src/stores/votingPowers.ts
@@ -7,7 +7,7 @@ import { Proposal, Space } from '@/types';
 const LATEST_BLOCK_NAME = 'latest';
 
 type SpaceDetails = Proposal['space'];
-type VotingPowerItem = {
+export type VotingPowerItem = {
   votingPowers: VotingPower[];
   totalVotingPower: bigint;
   status: VotingPowerStatus;

From 60d0edd4ec1ed403f9568089a7807512f5b77b8f Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Fri, 2 Aug 2024 17:11:23 +0900
Subject: [PATCH 10/30] refactor: improve chaining

---
 apps/ui/src/views/Proposal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/ui/src/views/Proposal.vue b/apps/ui/src/views/Proposal.vue
index ed3c1390e..abe8b9c8a 100644
--- a/apps/ui/src/views/Proposal.vue
+++ b/apps/ui/src/views/Proposal.vue
@@ -218,8 +218,8 @@ watchEffect(() => {
           >
             <div
               v-if="
-                votingPower &&
-                votingPower.error?.details === 'NOT_READY_YET' &&
+                votingPower?.error &&
+                votingPower.error.details === 'NOT_READY_YET' &&
                 ['evmSlotValue', 'ozVotesStorageProof'].includes(
                   votingPower.error.source
                 )

From 5416daa17aded58c3a4248a185db2534d7023e99 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Fri, 2 Aug 2024 17:17:28 +0900
Subject: [PATCH 11/30] refactor: use optional chaining

---
 apps/ui/src/components/IndicatorVotingPower.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/src/components/IndicatorVotingPower.vue b/apps/ui/src/components/IndicatorVotingPower.vue
index 97e7fef65..428260e45 100644
--- a/apps/ui/src/components/IndicatorVotingPower.vue
+++ b/apps/ui/src/components/IndicatorVotingPower.vue
@@ -52,7 +52,7 @@ function handleModalOpen() {
         >
           <IH-lightning-bolt class="inline-block -ml-1" />
           <IH-exclamation
-            v-if="props.votingPower && props.votingPower.status === 'error'"
+            v-if="props.votingPower?.status === 'error'"
             class="inline-block ml-1 text-rose-500"
           />
           <span v-else class="ml-1">{{ formattedVotingPower }}</span>

From c48188b289ff0394319f3a948f3eeb2478978cd3 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Fri, 2 Aug 2024 17:31:14 +0900
Subject: [PATCH 12/30] chore: fix formatting

---
 apps/ui/src/components/MessageVotingPower.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/ui/src/components/MessageVotingPower.vue b/apps/ui/src/components/MessageVotingPower.vue
index 3d3b296ef..24c7273c3 100644
--- a/apps/ui/src/components/MessageVotingPower.vue
+++ b/apps/ui/src/components/MessageVotingPower.vue
@@ -32,9 +32,9 @@ const insufficientProposeVp = computed(
     class="flex flex-col gap-3 items-start"
     v-bind="$attrs"
   >
-    <UiAlert type="error"
-      >There was an error fetching your voting power.</UiAlert
-    >
+    <UiAlert type="error">
+      There was an error fetching your voting power.
+    </UiAlert>
     <UiButton
       type="button"
       class="flex items-center gap-2"

From 0eb92d18617f904d9008a2cfe46ad3b1feef745e Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Fri, 2 Aug 2024 17:31:36 +0900
Subject: [PATCH 13/30] chore: fix missing ;

---
 apps/ui/src/components/ProposalsListItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/src/components/ProposalsListItem.vue b/apps/ui/src/components/ProposalsListItem.vue
index ad9a5c1c1..323ca66cb 100644
--- a/apps/ui/src/components/ProposalsListItem.vue
+++ b/apps/ui/src/components/ProposalsListItem.vue
@@ -19,7 +19,7 @@ const totalProgress = computed(() => quorumProgress(props.proposal));
 const handleVoteClick = (choice: Choice) => {
   if (!web3.value.account) {
     modalAccountOpen.value = true;
-    return
+    return;
   }
 
   selectedChoice.value = choice;

From 53738371329eb08fa043cae962855da653125923 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Fri, 2 Aug 2024 17:31:51 +0900
Subject: [PATCH 14/30] refactor: improve code readability

---
 apps/ui/src/views/Proposal.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/ui/src/views/Proposal.vue b/apps/ui/src/views/Proposal.vue
index abe8b9c8a..5b9d10caa 100644
--- a/apps/ui/src/views/Proposal.vue
+++ b/apps/ui/src/views/Proposal.vue
@@ -63,7 +63,10 @@ const currentVote = computed(
 );
 
 async function handleVoteClick(choice: Choice) {
-  if (!web3.value.account) return (modalAccountOpen.value = true);
+  if (!web3.value.account) {
+    modalAccountOpen.value = true;
+    return;
+  }
 
   selectedChoice.value = choice;
   modalOpenVote.value = true;

From f708b8c68a975da8dc0c5958982749bcc562f71f Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Fri, 2 Aug 2024 17:38:42 +0900
Subject: [PATCH 15/30] fix: fix to match updated name

---
 apps/ui/src/networks/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/src/networks/types.ts b/apps/ui/src/networks/types.ts
index ffcfc7166..97b94e2fd 100644
--- a/apps/ui/src/networks/types.ts
+++ b/apps/ui/src/networks/types.ts
@@ -141,7 +141,7 @@ export type ReadOnlyNetworkActions = {
     account: string,
     proposal: Proposal,
     choice: Choice,
-    metadataCid?: string
+    reason: string
   ): Promise<any>;
   followSpace(
     web3: Web3Provider | Wallet,

From e741ffdb962fc43dcf0588e46cef1d6a171e29ce Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Fri, 2 Aug 2024 18:45:32 +0900
Subject: [PATCH 16/30] fix: use web3.account to detect logged in user

There's not need to check for authInitiated, as we don't support login and logout while in this page
---
 apps/ui/src/views/Editor.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/apps/ui/src/views/Editor.vue b/apps/ui/src/views/Editor.vue
index df5424b9f..d3f7749a3 100644
--- a/apps/ui/src/views/Editor.vue
+++ b/apps/ui/src/views/Editor.vue
@@ -53,7 +53,7 @@ const { resolved, address, networkId } = useResolve(param);
 const route = useRoute();
 const router = useRouter();
 const { propose, updateProposal } = useActions();
-const { web3, authInitiated } = useWeb3();
+const { web3 } = useWeb3();
 const {
   spaceKey,
   network: walletConnectNetwork,
@@ -315,14 +315,11 @@ watch(
   { immediate: true }
 );
 
-watch(
-  [space, () => web3.value.account, () => authInitiated.value],
-  ([toSpace, toAccount, authInitiated]) => {
-    if (!toSpace || !proposal.value || !authInitiated) return;
+watch([space, () => web3.value.account], ([toSpace, toAccount]) => {
+  if (!toSpace || !proposal.value || !toAccount) return;
 
-    handleFetchVotingPower();
-  }
-);
+  handleFetchVotingPower();
+});
 
 watch(proposalData, () => {
   if (!proposal.value) return;

From b805f30027a0c446cee02bd81b9c651393abba74 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Fri, 2 Aug 2024 18:45:51 +0900
Subject: [PATCH 17/30] fix: fix PUBLISH button always stuck on loading state
 for guest user

---
 apps/ui/src/views/Editor.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/ui/src/views/Editor.vue b/apps/ui/src/views/Editor.vue
index d3f7749a3..96113b0d8 100644
--- a/apps/ui/src/views/Editor.vue
+++ b/apps/ui/src/views/Editor.vue
@@ -392,7 +392,8 @@ export default defineComponent({
           <UiButton
             class="rounded-l-none border-l-0 float-left !m-0 !px-3"
             :loading="
-              sending || !votingPower || votingPower.status === 'loading'
+              !!web3.account &&
+              (sending || !votingPower || votingPower.status === 'loading')
             "
             :disabled="!canSubmit"
             @click="handleProposeClick"

From 098d278a5f9181dfb3c0adfa4204ab0c98213370 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Fri, 2 Aug 2024 18:49:48 +0900
Subject: [PATCH 18/30] fix: always use the full VotingPowerItem type

---
 apps/ui/src/components/MessageVotingPower.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/src/components/MessageVotingPower.vue b/apps/ui/src/components/MessageVotingPower.vue
index 24c7273c3..838e1177a 100644
--- a/apps/ui/src/components/MessageVotingPower.vue
+++ b/apps/ui/src/components/MessageVotingPower.vue
@@ -4,7 +4,7 @@ import { VotingPowerItem } from '@/stores/votingPowers';
 const props = defineProps<{
   minVotingPower?: bigint;
   minProposalThreshold?: bigint;
-  votingPower: Pick<VotingPowerItem, 'status' | 'totalVotingPower'>;
+  votingPower: VotingPowerItem;
 }>();
 
 defineEmits<{

From 0d2c4a0a7ac729e261dc62c4b4bfc6de2c503f18 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Fri, 2 Aug 2024 19:07:20 +0900
Subject: [PATCH 19/30] fix(ux): improve button layout on small screen

---
 apps/ui/src/components/Modal/Vote.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/ui/src/components/Modal/Vote.vue b/apps/ui/src/components/Modal/Vote.vue
index d5bc9cb3b..cc7c35237 100644
--- a/apps/ui/src/components/Modal/Vote.vue
+++ b/apps/ui/src/components/Modal/Vote.vue
@@ -126,13 +126,22 @@ watch(
         />
       </dl>
       <div class="s-box">
-        <UiForm v-model="form" :error="formErrors" :definition="definition" />
+        <UiForm
+          v-model="form"
+          :error="formErrors"
+          :definition="VOTE_DEFINITION"
+        />
       </div>
     </div>
 
     <template #footer>
-      <div class="flex space-x-3">
-        <UiButton class="w-full" @click="$emit('close')"> Cancel </UiButton>
+      <div class="flex flex-col xs:flex-row gap-3">
+        <UiButton
+          class="w-full order-last xs:order-none"
+          @click="$emit('close')"
+        >
+          Cancel
+        </UiButton>
         <UiButton
           primary
           class="w-full"

From 81cb6ad409dbf015189f91d9fe3f133d80fd01ea Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Mon, 5 Aug 2024 10:31:30 +0900
Subject: [PATCH 20/30] refactor: avoid deprecated validateForm usage

---
 apps/ui/src/components/Modal/Vote.vue | 48 ++++++++++++++++-----------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/apps/ui/src/components/Modal/Vote.vue b/apps/ui/src/components/Modal/Vote.vue
index cc7c35237..8fbc25c22 100644
--- a/apps/ui/src/components/Modal/Vote.vue
+++ b/apps/ui/src/components/Modal/Vote.vue
@@ -1,22 +1,14 @@
 <script setup lang="ts">
 import { getChoiceText, getFormattedVotingPower } from '@/helpers/utils';
-import { validateForm } from '@/helpers/validation';
+import { getValidator } from '@/helpers/validation';
 import { 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 REASON_DEFINITION = {
+  title: 'Reason',
+  type: 'string',
+  format: 'long',
+  examples: ['Share you reason (optional)'],
+  maxLength: 1000
 };
 
 const props = defineProps<{
@@ -41,16 +33,27 @@ const {
 
 const loading = ref(false);
 const form = ref<Record<string, string>>({ reason: '' });
+const formErrors = ref({} as Record<string, any>);
+const formValidated = ref(false);
+
+const formValidator = getValidator({
+  $async: true,
+  type: 'object',
+  title: 'Reason',
+  additionalProperties: false,
+  required: [],
+  properties: {
+    reason: REASON_DEFINITION
+  }
+});
 
-const formErrors = computed(() =>
-  validateForm(definition, form.value, { skipEmptyOptionalFields: true })
-);
 const formattedVotingPower = computed(() =>
   getFormattedVotingPower(votingPower.value)
 );
 
 const canSubmit = computed(
   () =>
+    formValidated &&
     !!props.choice &&
     Object.keys(formErrors.value).length === 0 &&
     hasVoteVp.value
@@ -85,6 +88,13 @@ watch(
   },
   { immediate: true }
 );
+
+watchEffect(async () => {
+  formValidated.value = false;
+
+  formErrors.value = await formValidator.validateAsync(form.value);
+  formValidated.value = true;
+});
 </script>
 
 <template>
@@ -129,7 +139,7 @@ watch(
         <UiForm
           v-model="form"
           :error="formErrors"
-          :definition="VOTE_DEFINITION"
+          :definition="{ properties: { reason: REASON_DEFINITION } }"
         />
       </div>
     </div>

From 936b125d7ffd900ec409c2b33fd22dc62649bd1f Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Mon, 5 Aug 2024 10:31:47 +0900
Subject: [PATCH 21/30] fix(ui): decrease margin size

---
 apps/ui/src/components/Modal/Vote.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/src/components/Modal/Vote.vue b/apps/ui/src/components/Modal/Vote.vue
index 8fbc25c22..c0826558c 100644
--- a/apps/ui/src/components/Modal/Vote.vue
+++ b/apps/ui/src/components/Modal/Vote.vue
@@ -103,7 +103,7 @@ watchEffect(async () => {
       <h3>Cast your vote</h3>
     </template>
 
-    <div class="m-4 flex flex-col space-y-3">
+    <div class="m-4 mb-3 flex flex-col space-y-3">
       <MessageVotingPower
         v-if="votingPower"
         :voting-power="votingPower"

From 29cd1bb156e5020025a1800a8e5cfc0f0cb02736 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Mon, 5 Aug 2024 10:36:06 +0900
Subject: [PATCH 22/30] fix(ui): improve error message

---
 apps/ui/src/components/Modal/Vote.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/ui/src/components/Modal/Vote.vue b/apps/ui/src/components/Modal/Vote.vue
index c0826558c..c98e6a5aa 100644
--- a/apps/ui/src/components/Modal/Vote.vue
+++ b/apps/ui/src/components/Modal/Vote.vue
@@ -112,13 +112,16 @@ watchEffect(async () => {
       />
       <dl>
         <dt class="text-sm leading-5">Choice</dt>
-        <dd class="font-semibold text-skin-heading text-[20px] leading-6">
+        <dd class="text-skin-heading text-[20px] leading-6">
           <span
             v-if="choice"
-            class="test-skin-heading"
+            class="test-skin-heading font-semibold"
             v-text="getChoiceText(proposal.choices, choice)"
           />
-          <span v-else class="text-skin-danger"> No choice selected </span>
+          <div v-else class="flex gap-1 text-skin-danger items-center">
+            <IH-exclamation-circle />
+            No choice selected
+          </div>
         </dd>
         <dt class="text-sm leading-5 mt-3">Voting power</dt>
         <dd v-if="!votingPower || votingPower.status === 'loading'">

From 5287a1ec5826c503f5cc4aa299a66c1ca9463863 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Mon, 5 Aug 2024 11:19:42 +0900
Subject: [PATCH 23/30] fix: fix variable not reactive

---
 apps/ui/src/composables/useVotingPower.ts |  7 ++++++-
 apps/ui/src/stores/votingPowers.ts        | 19 ++++++-------------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/apps/ui/src/composables/useVotingPower.ts b/apps/ui/src/composables/useVotingPower.ts
index 6371081fc..35098a8ec 100644
--- a/apps/ui/src/composables/useVotingPower.ts
+++ b/apps/ui/src/composables/useVotingPower.ts
@@ -1,4 +1,5 @@
 import { supportsNullCurrent } from '@/networks';
+import { getIndex as getVotingPowerIndex } from '@/stores/votingPowers';
 import { Proposal, Space } from '@/types';
 
 export function useVotingPower() {
@@ -28,7 +29,11 @@ export function useVotingPower() {
   });
 
   const votingPower = computed(
-    () => space.value && votingPowersStore.get(space.value, block.value)
+    () =>
+      space.value &&
+      votingPowersStore.votingPowers.get(
+        getVotingPowerIndex(space.value, block.value)
+      )
   );
 
   const hasVoteVp = computed(
diff --git a/apps/ui/src/stores/votingPowers.ts b/apps/ui/src/stores/votingPowers.ts
index 6100ca469..0d84796da 100644
--- a/apps/ui/src/stores/votingPowers.ts
+++ b/apps/ui/src/stores/votingPowers.ts
@@ -16,20 +16,13 @@ export type VotingPowerItem = {
   error: utils.errors.VotingPowerDetailsError | null;
 };
 
+export function getIndex(space: SpaceDetails, block: number | null): string {
+  return `${space.id}:${block ?? LATEST_BLOCK_NAME}`;
+}
+
 export const useVotingPowersStore = defineStore('votingPowers', () => {
   const votingPowers = reactive<Map<string, VotingPowerItem>>(new Map());
 
-  function getIndex(space: SpaceDetails, block: number | null): string {
-    return `${space.id}:${block ?? LATEST_BLOCK_NAME}`;
-  }
-
-  function get(
-    space: SpaceDetails,
-    block: number | null
-  ): VotingPowerItem | undefined {
-    return votingPowers.get(getIndex(space, block));
-  }
-
   async function fetch(
     item: Space | Proposal,
     account: string,
@@ -37,7 +30,7 @@ export const useVotingPowersStore = defineStore('votingPowers', () => {
   ) {
     const space = 'space' in item ? item.space : item;
 
-    const existingVotingPower = get(space, block);
+    const existingVotingPower = votingPowers.get(getIndex(space, block));
     if (existingVotingPower && existingVotingPower.status === 'success') return;
 
     const network = getNetwork(item.network);
@@ -93,7 +86,7 @@ export const useVotingPowersStore = defineStore('votingPowers', () => {
   }
 
   return {
-    get,
+    votingPowers,
     fetch,
     reset
   };

From 4c6d306da5532e75fd71da9db6e2c68c5ffea499 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Mon, 5 Aug 2024 11:35:30 +0900
Subject: [PATCH 24/30] chore: update tests to include metadataUri

---
 .../ethereum-sig/__snapshots__/index.test.ts.snap   | 13 ++++++++-----
 .../clients/starknet/ethereum-sig/index.test.ts     |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/sx.js/test/unit/clients/starknet/ethereum-sig/__snapshots__/index.test.ts.snap b/packages/sx.js/test/unit/clients/starknet/ethereum-sig/__snapshots__/index.test.ts.snap
index e61f6fac9..34f8b7002 100644
--- a/packages/sx.js/test/unit/clients/starknet/ethereum-sig/__snapshots__/index.test.ts.snap
+++ b/packages/sx.js/test/unit/clients/starknet/ethereum-sig/__snapshots__/index.test.ts.snap
@@ -100,7 +100,7 @@ exports[`EthereumSig > should create vote envelope 1`] = `
   "data": {
     "authenticator": "0x53d98050a9738da0eac7498d909ea03f6eb03d07fb95877b54ff8acf7712276",
     "choice": 1,
-    "metadataUri": "",
+    "metadataUri": "ipfs://QmNrm6xKuib1THtWkiN5CKtBEerQCDpUtmgDqiaU2xDmca",
     "proposal": 1,
     "space": "0x06330d3e48f59f5411c201ee2e9e9ccdc738fb3bb192b0e77e4eda26fa1a22f8",
     "strategies": [
@@ -116,7 +116,10 @@ exports[`EthereumSig > should create vote envelope 1`] = `
       "authenticator": "0x53d98050a9738da0eac7498d909ea03f6eb03d07fb95877b54ff8acf7712276",
       "chainId": "0x534e5f5345504f4c4941",
       "choice": "0x1",
-      "metadataUri": [],
+      "metadataUri": [
+        "0x697066733a2f2f516d4e726d36784b75696231544874576b694e35434b7442",
+        "0x4565725143447055746d6744716961553278446d6361",
+      ],
       "proposalId": "0x1",
       "space": "0x06330d3e48f59f5411c201ee2e9e9ccdc738fb3bb192b0e77e4eda26fa1a22f8",
       "userVotingStrategies": [],
@@ -124,9 +127,9 @@ exports[`EthereumSig > should create vote envelope 1`] = `
     },
     "primaryType": "Vote",
     "signature": [
-      "0x2986292e9bf23c0f9f738fd32556f8096631c883dec6c4d771d2ce65d69649c7",
-      "0x2b068bd532570c93e54ac22b0c1e8683229e26c6677c0a68bc677da1a05668ad",
-      "0x1b",
+      "0x6e565e214090a3845caca4290e4cad24186c45c945faeeb148649139228f6057",
+      "0x6197a3f635219831616276b977718d56e666ed4d2d74b7ba82d8d7c39bd7d29b",
+      "0x1c",
     ],
   },
 }
diff --git a/packages/sx.js/test/unit/clients/starknet/ethereum-sig/index.test.ts b/packages/sx.js/test/unit/clients/starknet/ethereum-sig/index.test.ts
index ce55c3ee7..a9549d91a 100644
--- a/packages/sx.js/test/unit/clients/starknet/ethereum-sig/index.test.ts
+++ b/packages/sx.js/test/unit/clients/starknet/ethereum-sig/index.test.ts
@@ -85,7 +85,7 @@ describe('EthereumSig', () => {
             index: 0
           }
         ],
-        metadataUri: '',
+        metadataUri: 'ipfs://QmNrm6xKuib1THtWkiN5CKtBEerQCDpUtmgDqiaU2xDmca',
         proposal: 1,
         choice: 1
       }

From 0292d23ddaf85aaaa476acc6aa96275e8726a3c6 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Mon, 5 Aug 2024 11:36:42 +0900
Subject: [PATCH 25/30] fix: fix metadataUri being ignored from voteHash

---
 packages/sx.js/src/clients/starknet/ethereum-tx/index.ts        | 2 +-
 .../sx.js/test/unit/clients/starknet/ethereum-tx/index.test.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/sx.js/src/clients/starknet/ethereum-tx/index.ts b/packages/sx.js/src/clients/starknet/ethereum-tx/index.ts
index 27264258f..85fa4c177 100644
--- a/packages/sx.js/src/clients/starknet/ethereum-tx/index.ts
+++ b/packages/sx.js/src/clients/starknet/ethereum-tx/index.ts
@@ -305,7 +305,7 @@ export class EthereumTx {
       data.proposal,
       getChoiceEnum(data.choice),
       userVotingStrategies,
-      shortString.splitLongString('') // metadataUri
+      shortString.splitLongString(data.metadataUri)
     ]);
 
     return `0x${poseidonHashMany(compiled.map(v => BigInt(v))).toString(16)}`;
diff --git a/packages/sx.js/test/unit/clients/starknet/ethereum-tx/index.test.ts b/packages/sx.js/test/unit/clients/starknet/ethereum-tx/index.test.ts
index a2c1b89de..d0b67ef96 100644
--- a/packages/sx.js/test/unit/clients/starknet/ethereum-tx/index.test.ts
+++ b/packages/sx.js/test/unit/clients/starknet/ethereum-tx/index.test.ts
@@ -62,7 +62,7 @@ describe('EthereumTx', () => {
 
     const result = await ethereumTx.getVoteHash(wallet, data);
     expect(result).toEqual(
-      '0x4affc1f0108aecdd06a9c2b8402ffe11ba37e27dfcbb98964ff68f83899367b'
+      '0x15c3ec5ebb1e82803db2d695eb12a902d5bb0d52c63e1536015e6d3debe70'
     );
   });
 

From af1e616f4114d3f734efcdfe5c394962e3bcb3e0 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Mon, 5 Aug 2024 12:08:48 +0900
Subject: [PATCH 26/30] fix: check that voting power is successful, in case
 threshold is 0

---
 apps/ui/src/composables/useVotingPower.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/ui/src/composables/useVotingPower.ts b/apps/ui/src/composables/useVotingPower.ts
index 35098a8ec..dd45088e0 100644
--- a/apps/ui/src/composables/useVotingPower.ts
+++ b/apps/ui/src/composables/useVotingPower.ts
@@ -45,6 +45,7 @@ export function useVotingPower() {
     () =>
       (votingPower.value &&
         space.value &&
+        votingPower.value.status === 'success' &&
         votingPower.value.totalVotingPower >=
           BigInt(space.value.proposal_threshold)) ||
       false

From a2f8d674f1413a7fcef25a9dbfd2e876d90dc456 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Mon, 5 Aug 2024 13:07:20 +0900
Subject: [PATCH 27/30] refactor: save propose and vote potential in vp store

---
 apps/ui/src/components/MessageVotingPower.vue | 41 ++++++++-----------
 apps/ui/src/components/Modal/Vote.vue         |  8 ++--
 apps/ui/src/composables/useVotingPower.ts     | 17 +-------
 apps/ui/src/stores/votingPowers.ts            | 15 ++++++-
 apps/ui/src/views/Editor.vue                  |  8 ++--
 5 files changed, 41 insertions(+), 48 deletions(-)

diff --git a/apps/ui/src/components/MessageVotingPower.vue b/apps/ui/src/components/MessageVotingPower.vue
index 838e1177a..26937e85e 100644
--- a/apps/ui/src/components/MessageVotingPower.vue
+++ b/apps/ui/src/components/MessageVotingPower.vue
@@ -1,29 +1,14 @@
 <script setup lang="ts">
 import { VotingPowerItem } from '@/stores/votingPowers';
 
-const props = defineProps<{
-  minVotingPower?: bigint;
-  minProposalThreshold?: bigint;
+defineProps<{
   votingPower: VotingPowerItem;
+  action?: 'vote' | 'propose';
 }>();
 
 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>
@@ -43,10 +28,20 @@ const insufficientProposeVp = computed(
       <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 v-else-if="votingPower.status === 'success'">
+    <UiAlert
+      v-if="action === 'vote' && !votingPower.canVote"
+      type="error"
+      v-bind="$attrs"
+    >
+      You do not have enough voting power to vote.
+    </UiAlert>
+    <UiAlert
+      v-else-if="action === 'propose' && !votingPower.canPropose"
+      type="error"
+      v-bind="$attrs"
+    >
+      You do not have enough voting power to create proposal in this space.
+    </UiAlert>
+  </template>
 </template>
diff --git a/apps/ui/src/components/Modal/Vote.vue b/apps/ui/src/components/Modal/Vote.vue
index c98e6a5aa..9555b9afd 100644
--- a/apps/ui/src/components/Modal/Vote.vue
+++ b/apps/ui/src/components/Modal/Vote.vue
@@ -27,8 +27,7 @@ const { web3 } = useWeb3();
 const {
   votingPower,
   fetch: fetchVotingPower,
-  reset: resetVotingPower,
-  hasVoteVp
+  reset: resetVotingPower
 } = useVotingPower();
 
 const loading = ref(false);
@@ -56,7 +55,7 @@ const canSubmit = computed(
     formValidated &&
     !!props.choice &&
     Object.keys(formErrors.value).length === 0 &&
-    hasVoteVp.value
+    votingPower.value?.canVote
 );
 
 async function handleSubmit() {
@@ -102,12 +101,11 @@ watchEffect(async () => {
     <template #header>
       <h3>Cast your vote</h3>
     </template>
-
     <div class="m-4 mb-3 flex flex-col space-y-3">
       <MessageVotingPower
         v-if="votingPower"
         :voting-power="votingPower"
-        :min-voting-power="0n"
+        action="vote"
         @fetch-voting-power="handleFetchVotingPower"
       />
       <dl>
diff --git a/apps/ui/src/composables/useVotingPower.ts b/apps/ui/src/composables/useVotingPower.ts
index dd45088e0..52a508dc2 100644
--- a/apps/ui/src/composables/useVotingPower.ts
+++ b/apps/ui/src/composables/useVotingPower.ts
@@ -36,21 +36,6 @@ export function useVotingPower() {
       )
   );
 
-  const hasVoteVp = computed(
-    () =>
-      (votingPower.value && votingPower.value.totalVotingPower > 0n) || false
-  );
-
-  const hasProposeVp = computed(
-    () =>
-      (votingPower.value &&
-        space.value &&
-        votingPower.value.status === 'success' &&
-        votingPower.value.totalVotingPower >=
-          BigInt(space.value.proposal_threshold)) ||
-      false
-  );
-
   function latestBlock(space: Space) {
     return supportsNullCurrent(space.network)
       ? null
@@ -79,5 +64,5 @@ export function useVotingPower() {
     }
   );
 
-  return { votingPower, hasVoteVp, hasProposeVp, fetch, reset };
+  return { votingPower, fetch, reset };
 }
diff --git a/apps/ui/src/stores/votingPowers.ts b/apps/ui/src/stores/votingPowers.ts
index 0d84796da..f908708f6 100644
--- a/apps/ui/src/stores/votingPowers.ts
+++ b/apps/ui/src/stores/votingPowers.ts
@@ -14,6 +14,8 @@ export type VotingPowerItem = {
   symbol: string;
   decimals: number;
   error: utils.errors.VotingPowerDetailsError | null;
+  canPropose: boolean;
+  canVote: boolean;
 };
 
 export function getIndex(space: SpaceDetails, block: number | null): string {
@@ -41,7 +43,9 @@ export const useVotingPowersStore = defineStore('votingPowers', () => {
       totalVotingPower: 0n,
       decimals: 18,
       symbol: space.voting_power_symbol,
-      error: null
+      error: null,
+      canPropose: false,
+      canVote: false
     };
 
     if (existingVotingPower) {
@@ -69,6 +73,15 @@ export const useVotingPowersStore = defineStore('votingPowers', () => {
         status: 'success',
         decimals: Math.max(...vp.map(votingPower => votingPower.decimals), 0)
       };
+
+      if ('proposal_threshold' in space) {
+        vpItem.canPropose =
+          vpItem.totalVotingPower >= BigInt(space.proposal_threshold);
+      } else {
+        vpItem.canVote = vpItem.totalVotingPower > 0n;
+      }
+
+      console.log(vpItem);
     } catch (e: unknown) {
       if (e instanceof utils.errors.VotingPowerDetailsError) {
         vpItem.error = e;
diff --git a/apps/ui/src/views/Editor.vue b/apps/ui/src/views/Editor.vue
index 99b46bcfd..e450a70b1 100644
--- a/apps/ui/src/views/Editor.vue
+++ b/apps/ui/src/views/Editor.vue
@@ -63,7 +63,7 @@ const {
 } = useWalletConnectTransaction();
 const spacesStore = useSpacesStore();
 const proposalsStore = useProposalsStore();
-const { votingPower, fetch: fetchVotingPower, hasProposeVp } = useVotingPower();
+const { votingPower, fetch: fetchVotingPower } = useVotingPower();
 
 const modalOpen = ref(false);
 const previewEnabled = ref(false);
@@ -225,7 +225,9 @@ const formErrors = computed(() => {
   );
 });
 const canSubmit = computed(() => {
-  return hasProposeVp.value && Object.keys(formErrors.value).length === 0;
+  return (
+    votingPower.value?.canPropose && Object.keys(formErrors.value).length === 0
+  );
 });
 
 async function handleProposeClick() {
@@ -420,7 +422,7 @@ export default defineComponent({
           v-if="votingPower && space"
           class="mb-4"
           :voting-power="votingPower"
-          :min-proposal-threshold="BigInt(space.proposal_threshold)"
+          action="propose"
           @fetch-voting-power="handleFetchVotingPower"
         />
 

From 4362cee232dfa7f8c0da3d026251c57fad90d861 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Mon, 5 Aug 2024 13:11:39 +0900
Subject: [PATCH 28/30] chore: remove console output

---
 apps/ui/src/stores/votingPowers.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/ui/src/stores/votingPowers.ts b/apps/ui/src/stores/votingPowers.ts
index f908708f6..6360cfc10 100644
--- a/apps/ui/src/stores/votingPowers.ts
+++ b/apps/ui/src/stores/votingPowers.ts
@@ -80,8 +80,6 @@ export const useVotingPowersStore = defineStore('votingPowers', () => {
       } else {
         vpItem.canVote = vpItem.totalVotingPower > 0n;
       }
-
-      console.log(vpItem);
     } catch (e: unknown) {
       if (e instanceof utils.errors.VotingPowerDetailsError) {
         vpItem.error = e;

From 583004b04db91873c4ba623a0887326f6146d5e4 Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Mon, 5 Aug 2024 13:14:40 +0900
Subject: [PATCH 29/30] fix: remove unecessary template wrapper

---
 apps/ui/src/components/MessageVotingPower.vue | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/apps/ui/src/components/MessageVotingPower.vue b/apps/ui/src/components/MessageVotingPower.vue
index 26937e85e..0193b979c 100644
--- a/apps/ui/src/components/MessageVotingPower.vue
+++ b/apps/ui/src/components/MessageVotingPower.vue
@@ -28,20 +28,18 @@ defineEmits<{
       <IH-refresh />Retry
     </UiButton>
   </div>
-  <template v-else-if="votingPower.status === 'success'">
-    <UiAlert
-      v-if="action === 'vote' && !votingPower.canVote"
-      type="error"
-      v-bind="$attrs"
-    >
-      You do not have enough voting power to vote.
-    </UiAlert>
-    <UiAlert
-      v-else-if="action === 'propose' && !votingPower.canPropose"
-      type="error"
-      v-bind="$attrs"
-    >
-      You do not have enough voting power to create proposal in this space.
-    </UiAlert>
-  </template>
+  <UiAlert
+    v-else-if="action === 'vote' && !votingPower.canVote"
+    type="error"
+    v-bind="$attrs"
+  >
+    You do not have enough voting power to vote.
+  </UiAlert>
+  <UiAlert
+    v-else-if="action === 'propose' && !votingPower.canPropose"
+    type="error"
+    v-bind="$attrs"
+  >
+    You do not have enough voting power to create proposal in this space.
+  </UiAlert>
 </template>

From a19627f85aa14f1c4cab34913a1b9066d106d070 Mon Sep 17 00:00:00 2001
From: Wan <495709+wa0x6e@users.noreply.github.com>
Date: Wed, 7 Aug 2024 17:43:25 +0400
Subject: [PATCH 30/30] Update apps/ui/src/views/Space/Proposals.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Wiktor Tkaczyński <wiktor.tkaczynski@gmail.com>
---
 apps/ui/src/views/Space/Proposals.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/ui/src/views/Space/Proposals.vue b/apps/ui/src/views/Space/Proposals.vue
index 43ea741ea..e10db8769 100644
--- a/apps/ui/src/views/Space/Proposals.vue
+++ b/apps/ui/src/views/Space/Proposals.vue
@@ -48,7 +48,7 @@ watch(
 
 watch(
   [props.space, () => web3.value.account, () => web3.value.authLoading],
-  ([toSpace, toAccount, toAuthLoading], [, fromAccount, , ,]) => {
+  ([toSpace, toAccount, toAuthLoading], [, fromAccount]) => {
     if (fromAccount && toAccount && fromAccount !== toAccount) {
       resetVotingPower();
     }