From a20a5aff0f30aa8e3ee48b22d2b2fc3df24be72b Mon Sep 17 00:00:00 2001
From: Wan Qi Chen <495709+wa0x6e@users.noreply.github.com>
Date: Fri, 25 Oct 2024 00:10:44 +0400
Subject: [PATCH] refactor: refactor: create dedicated composable for vote
 voting power

---
 apps/ui/src/components/Modal/Vote.vue         | 10 +--
 apps/ui/src/composables/useVoteVotingPower.ts | 65 +++++++++++++++++++
 apps/ui/src/views/Proposal.vue                | 14 ++--
 apps/ui/src/views/Space/Proposals.vue         | 10 +--
 4 files changed, 87 insertions(+), 12 deletions(-)
 create mode 100644 apps/ui/src/composables/useVoteVotingPower.ts

diff --git a/apps/ui/src/components/Modal/Vote.vue b/apps/ui/src/components/Modal/Vote.vue
index 53da3b2fc..922cf92a0 100644
--- a/apps/ui/src/components/Modal/Vote.vue
+++ b/apps/ui/src/components/Modal/Vote.vue
@@ -27,10 +27,10 @@ const emit = defineEmits<{
 const { vote } = useActions();
 const { web3 } = useWeb3();
 const {
-  votingPower,
-  fetch: fetchVotingPower,
+  getProposalVp,
+  fetchProposalVp,
   reset: resetVotingPower
-} = useVotingPower();
+} = useVoteVotingPower();
 const proposalsStore = useProposalsStore();
 const { loadVotes, votes } = useAccount();
 const route = useRoute();
@@ -55,6 +55,8 @@ const formValidator = getValidator({
   }
 });
 
+const votingPower = computed(() => getProposalVp(props.proposal));
+
 const formattedVotingPower = computed(() =>
   getFormattedVotingPower(votingPower.value)
 );
@@ -124,7 +126,7 @@ async function handleConfirmed(tx?: string | null) {
 }
 
 function handleFetchVotingPower() {
-  fetchVotingPower(props.proposal);
+  fetchProposalVp(props.proposal);
 }
 
 watch(
diff --git a/apps/ui/src/composables/useVoteVotingPower.ts b/apps/ui/src/composables/useVoteVotingPower.ts
new file mode 100644
index 000000000..b8c3e5d65
--- /dev/null
+++ b/apps/ui/src/composables/useVoteVotingPower.ts
@@ -0,0 +1,65 @@
+import { supportsNullCurrent } from '@/networks';
+import { getIndex } from '@/stores/votingPowers';
+import { NetworkID, Proposal, Space } from '@/types';
+
+export function useVoteVotingPower() {
+  const votingPowersStore = useVotingPowersStore();
+  const { web3 } = useWeb3();
+  const { getCurrent } = useMetaStore();
+
+  function latestBlock(network: NetworkID) {
+    return supportsNullCurrent(network) ? null : getCurrent(network) || 0;
+  }
+
+  function proposalSnapshot(proposal: Proposal) {
+    return (
+      (proposal.state === 'pending' ? null : proposal.snapshot) ||
+      latestBlock(proposal.network)
+    );
+  }
+
+  function fetchProposalVp(proposal: Proposal) {
+    if (!web3.value.account) return;
+
+    votingPowersStore.fetch(
+      proposal,
+      web3.value.account,
+      proposalSnapshot(proposal)
+    );
+  }
+
+  function fetchSpaceVp(space: Space) {
+    if (!web3.value.account) return;
+
+    votingPowersStore.fetch(
+      space,
+      web3.value.account,
+      latestBlock(space.network)
+    );
+  }
+
+  function getProposalVp(proposal: Proposal) {
+    return votingPowersStore.votingPowers.get(
+      getIndex(proposal.space, proposalSnapshot(proposal))
+    );
+  }
+
+  function getSpaceVp(space: Space) {
+    return votingPowersStore.votingPowers.get(
+      getIndex(space, latestBlock(space.network))
+    );
+  }
+
+  function reset() {
+    votingPowersStore.reset();
+  }
+
+  watch(
+    () => web3.value.account,
+    account => {
+      if (!account) reset();
+    }
+  );
+
+  return { getProposalVp, getSpaceVp, fetchProposalVp, fetchSpaceVp, reset };
+}
diff --git a/apps/ui/src/views/Proposal.vue b/apps/ui/src/views/Proposal.vue
index ee3a7eb4c..693efe531 100644
--- a/apps/ui/src/views/Proposal.vue
+++ b/apps/ui/src/views/Proposal.vue
@@ -10,10 +10,10 @@ const props = defineProps<{
 const route = useRoute();
 const proposalsStore = useProposalsStore();
 const {
-  votingPower,
-  fetch: fetchVotingPower,
+  getProposalVp,
+  fetchProposalVp,
   reset: resetVotingPower
-} = useVotingPower();
+} = useVoteVotingPower();
 const { setTitle } = useTitle();
 const { web3 } = useWeb3();
 const { modalAccountOpen } = useModal();
@@ -39,6 +39,12 @@ const discussion = computed(() => {
   return sanitizeUrl(proposal.value.discussion);
 });
 
+const votingPower = computed(() => {
+  if (!proposal.value) return;
+
+  return getProposalVp(proposal.value);
+});
+
 const votingPowerDecimals = computed(() => {
   if (!proposal.value) return 0;
   return Math.max(
@@ -73,7 +79,7 @@ async function handleVoteSubmitted() {
 function handleFetchVotingPower() {
   if (!proposal.value) return;
 
-  fetchVotingPower(proposal.value);
+  fetchProposalVp(proposal.value);
 }
 
 watch(
diff --git a/apps/ui/src/views/Space/Proposals.vue b/apps/ui/src/views/Space/Proposals.vue
index 96c01da5a..793a14d94 100644
--- a/apps/ui/src/views/Space/Proposals.vue
+++ b/apps/ui/src/views/Space/Proposals.vue
@@ -8,10 +8,10 @@ const props = defineProps<{ space: Space }>();
 
 const { setTitle } = useTitle();
 const {
-  votingPower,
-  fetch: fetchVotingPower,
+  getSpaceVp,
+  fetchSpaceVp,
   reset: resetVotingPower
-} = useVotingPower();
+} = useVoteVotingPower();
 const { web3 } = useWeb3();
 const router = useRouter();
 const route = useRoute();
@@ -27,6 +27,8 @@ const proposalsRecord = computed(
   () => proposalsStore.proposals[`${props.space.network}:${props.space.id}`]
 );
 
+const votingPower = computed(() => getSpaceVp(props.space));
+
 async function handleEndReached() {
   if (!proposalsRecord.value?.hasMoreProposals) return;
 
@@ -34,7 +36,7 @@ async function handleEndReached() {
 }
 
 function handleFetchVotingPower() {
-  fetchVotingPower(props.space);
+  fetchSpaceVp(props.space);
 }
 
 watch(