Revert "feat: vote modal with reason (#427)"

This reverts commit ad6fc9e.

apps/ui/src/components/IndicatorVotingPower.vue

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

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

@@ -1,5 +1,4 @@
 <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';
@@ -9,26 +8,23 @@ import { VotingPower, VotingPowerStatus } from '@/networks/types';
 const props = defineProps<{
   open: boolean;
   networkId: NetworkID;
-  votingPower?: {
-    symbol: string;
-    totalVotingPower: bigint;
-    decimals: number;
-    votingPowers: VotingPower[];
-    status: VotingPowerStatus;
-    error: utils.errors.VotingPowerDetailsError | null;
-  };
+  votingPowerSymbol: string;
+  votingPowers: VotingPower[];
+  votingPowerStatus: VotingPowerStatus;
+  finalDecimals: number;
 }>();
 
 defineEmits<{
   (e: 'close');
-  (e: 'fetchVotingPower');
+  (e: 'getVotingPower');
 }>();
 
 const network = computed(() => getNetwork(props.networkId));
 const baseNetwork = computed(() =>
   network.value.baseNetworkId ? getNetwork(network.value.baseNetworkId) : network.value
 );
-const loading = computed(() => !props.votingPower || props.votingPower.status === 'loading');
+const loading = computed(() => props.votingPowerStatus === 'loading');
+const error = computed(() => props.votingPowerStatus === 'error');
 </script>
 
 <template>
@@ -37,14 +33,15 @@ const loading = computed(() => !props.votingPower || props.votingPower.status ==
       <h3>Your voting power</h3>
     </template>
     <UiLoading v-if="loading" class="p-4 block text-center" />
-    <div v-else-if="votingPower">
-      <MessageVotingPower
-        class="p-4"
-        :voting-power="votingPower"
-        @fetch-voting-power="$emit('fetchVotingPower')"
-      />
+    <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-for="(strategy, i) in votingPower.votingPowers"
+        v-for="(strategy, i) in votingPowers"
         :key="i"
         class="py-3 px-4 border-b last:border-b-0"
       >
@@ -60,12 +57,12 @@ const loading = computed(() => !props.votingPower || props.votingPower.status ==
           />
           <div class="text-skin-link shrink-0">
             {{
-              _n(Number(strategy.value) / 10 ** votingPower.decimals, 'compact', {
+              _n(Number(strategy.value) / 10 ** finalDecimals, 'compact', {
                 maximumFractionDigits: 2,
                 formatDust: true
               })
             }}
-            {{ votingPower.symbol }}
+            {{ votingPowerSymbol }}
           </div>
         </div>
         <div class="flex justify-between">

apps/ui/src/components/ProposalVoteApproval.vue

@@ -2,6 +2,7 @@
 import { Choice, Proposal } from '@/types';
 
 defineProps<{
+  sendingType: Choice | null;
   proposal: Proposal;
 }>();
 
@@ -36,7 +37,12 @@ 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"
+      :loading="!!sendingType"
+      @click="emit('vote', selectedChoices)"
+    >
       Vote
     </UiButton>
   </div>