From 6a8b3ed8cacea1feefad272803710105d3e29f65 Mon Sep 17 00:00:00 2001
From: Wan <495709+wa0x6e@users.noreply.github.com>
Date: Thu, 28 Nov 2024 22:27:06 +0800
Subject: [PATCH] refactor: create dedicated composable for proposing power
 (#988)

* refactor: extract proposing power into its own composable

* fix: use proposition variant everywhere
---
 .../ui/src/composables/usePropositionPower.ts | 40 +++++++++++++++++++
 apps/ui/src/views/Space/Editor.vue            | 29 +++++++++-----
 2 files changed, 58 insertions(+), 11 deletions(-)
 create mode 100644 apps/ui/src/composables/usePropositionPower.ts

diff --git a/apps/ui/src/composables/usePropositionPower.ts b/apps/ui/src/composables/usePropositionPower.ts
new file mode 100644
index 000000000..e8cc15cb5
--- /dev/null
+++ b/apps/ui/src/composables/usePropositionPower.ts
@@ -0,0 +1,40 @@
+import { supportsNullCurrent } from '@/networks';
+import { getIndex } from '@/stores/votingPowers';
+import { NetworkID, Space } from '@/types';
+
+export function usePropositionPower() {
+  const votingPowersStore = useVotingPowersStore();
+  const { web3 } = useWeb3();
+  const { getCurrent } = useMetaStore();
+
+  function latestBlock(network: NetworkID) {
+    return supportsNullCurrent(network) ? null : getCurrent(network) ?? 0;
+  }
+
+  function fetch(space: Space) {
+    votingPowersStore.fetch(
+      space,
+      web3.value.account,
+      latestBlock(space.network)
+    );
+  }
+
+  function get(space: Space) {
+    return votingPowersStore.votingPowers.get(
+      getIndex(space, latestBlock(space.network))
+    );
+  }
+
+  function reset() {
+    votingPowersStore.reset();
+  }
+
+  watch(
+    () => web3.value.account,
+    account => {
+      if (!account) reset();
+    }
+  );
+
+  return { fetch, get };
+}
diff --git a/apps/ui/src/views/Space/Editor.vue b/apps/ui/src/views/Space/Editor.vue
index 227df8fe7..961cae7d7 100644
--- a/apps/ui/src/views/Space/Editor.vue
+++ b/apps/ui/src/views/Space/Editor.vue
@@ -47,7 +47,8 @@ const {
   reset
 } = useWalletConnectTransaction();
 const proposalsStore = useProposalsStore();
-const { votingPower, fetch: fetchVotingPower } = useVotingPower();
+const { get: getPropositionPower, fetch: fetchPropositionPower } =
+  usePropositionPower();
 const { strategiesWithTreasuries } = useTreasuries(props.space);
 const termsStore = useTermsStore();
 
@@ -154,7 +155,7 @@ const canSubmit = computed(() => {
   if (Object.keys(formErrors.value).length > 0) return false;
 
   return web3.value.account
-    ? votingPower.value?.canPropose
+    ? propositionPower.value?.canPropose
     : !web3.value.authLoading;
 });
 const spaceType = computed(() =>
@@ -167,6 +168,8 @@ const proposalLimitReached = computed(
     (props.space.proposal_count_30d || 0) >= MAX_30D_PROPOSALS[spaceType.value]
 );
 
+const propositionPower = computed(() => getPropositionPower(props.space));
+
 async function handleProposeClick() {
   if (!proposal.value) return;
 
@@ -278,8 +281,8 @@ function handleTransactionAccept() {
   reset();
 }
 
-function handleFetchVotingPower() {
-  fetchVotingPower(props.space);
+function handleFetchPropositionPower() {
+  fetchPropositionPower(props.space);
 }
 
 watch(
@@ -287,7 +290,7 @@ watch(
   toAccount => {
     if (!toAccount) return;
 
-    handleFetchVotingPower();
+    handleFetchPropositionPower();
   },
   { immediate: true }
 );
@@ -358,7 +361,9 @@ watchEffect(() => {
         class="primary min-w-[46px] flex gap-2 justify-center items-center !px-0 md:!px-3"
         :loading="
           !!web3.account &&
-          (sending || !votingPower || votingPower.status === 'loading')
+          (sending ||
+            !propositionPower ||
+            propositionPower.status === 'loading')
         "
         :disabled="!canSubmit"
         @click="handleProposeClick"
@@ -373,14 +378,16 @@ watchEffect(() => {
     <div class="md:mr-[340px]">
       <UiContainer class="pt-5 !max-w-[710px] mx-0 md:mx-auto s-box">
         <MessageVotingPower
-          v-if="votingPower"
+          v-if="propositionPower"
           class="mb-4"
-          :voting-power="votingPower"
+          :voting-power="propositionPower"
           action="propose"
-          @fetch-voting-power="handleFetchVotingPower"
+          @fetch-voting-power="handleFetchPropositionPower"
         />
         <UiAlert
-          v-if="votingPower && spaceType === 'default' && proposalLimitReached"
+          v-if="
+            propositionPower && spaceType === 'default' && proposalLimitReached
+          "
           type="error"
           class="mb-4"
         >
@@ -396,7 +403,7 @@ watchEffect(() => {
         </UiAlert>
         <UiAlert
           v-else-if="
-            votingPower && spaceType !== 'turbo' && proposalLimitReached
+            propositionPower && spaceType !== 'turbo' && proposalLimitReached
           "
           type="error"
           class="mb-4"