refactor: create dedicated composable for proposing power

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 };
+}

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 modalOpen = ref(false);
@@ -152,7 +153,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(() =>
@@ -165,6 +166,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;
 
@@ -266,16 +269,16 @@ function handleTransactionAccept() {
   reset();
 }
 
-function handleFetchVotingPower() {
-  fetchVotingPower(props.space);
+function handleFetchPropositionPower() {
+  fetchPropositionPower(props.space);
 }
 
 watch(
   () => web3.value.account,
   toAccount => {
     if (!toAccount) return;
 
-    handleFetchVotingPower();
+    handleFetchPropositionPower();
   },
   { immediate: true }
 );
@@ -346,7 +349,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"
@@ -361,14 +366,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"
         >
@@ -384,7 +391,7 @@ watchEffect(() => {
         </UiAlert>
         <UiAlert
           v-else-if="
-            votingPower && spaceType !== 'turbo' && proposalLimitReached
+            propositionPower && spaceType !== 'turbo' && proposalLimitReached
           "
           type="error"
           class="mb-4"