From 4c0b06fb48a5cfcf438e66de931b1728a15c261c Mon Sep 17 00:00:00 2001
From: Chaitanya <yourchaitu@gmail.com>
Date: Thu, 4 Jul 2024 08:33:39 +0530
Subject: [PATCH] fix: format percentage values in delegates page (#462)

---
 apps/ui/src/components/SpaceDelegates.vue | 6 +++---
 apps/ui/src/composables/useDelegates.ts   | 5 ++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/ui/src/components/SpaceDelegates.vue b/apps/ui/src/components/SpaceDelegates.vue
index d9c63f43c..28c2896b8 100644
--- a/apps/ui/src/components/SpaceDelegates.vue
+++ b/apps/ui/src/components/SpaceDelegates.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { _n, shorten } from '@/helpers/utils';
+import { _n, _p, shorten } from '@/helpers/utils';
 import { getNetwork } from '@/networks';
 import { Space, SpaceMetadataDelegation } from '@/types';
 
@@ -131,13 +131,13 @@ watchEffect(() => setTitle(`Delegates - ${props.space.name}`));
               class="hidden md:flex w-[20%] flex-col items-end justify-center leading-[22px] truncate"
             >
               <h4 class="text-skin-link" v-text="_n(delegate.tokenHoldersRepresentedAmount)" />
-              <div class="text-[17px]" v-text="`${delegate.delegatorsPercentage.toFixed(3)}%`" />
+              <div class="text-[17px]" v-text="_p(delegate.delegatorsPercentage)" />
             </div>
             <div
               class="w-[40%] md:w-[20%] flex flex-col items-end justify-center pr-4 leading-[22px] truncate"
             >
               <h4 class="text-skin-link" v-text="_n(delegate.delegatedVotes)" />
-              <div class="text-[17px]" v-text="`${delegate.votesPercentage.toFixed(3)}%`" />
+              <div class="text-[17px]" v-text="_p(delegate.votesPercentage)" />
             </div>
           </div>
           <template #loading>
diff --git a/apps/ui/src/composables/useDelegates.ts b/apps/ui/src/composables/useDelegates.ts
index 8b374a5e6..383a30781 100644
--- a/apps/ui/src/composables/useDelegates.ts
+++ b/apps/ui/src/composables/useDelegates.ts
@@ -115,10 +115,9 @@ export function useDelegates(delegationApiUrl: string, governance: string) {
 
     const newDelegates = delegatesData.map((delegate: ApiDelegate) => {
       const delegatorsPercentage =
-        (Number(delegate.tokenHoldersRepresentedAmount) / Number(governanceData.totalDelegates)) *
-        100;
+        Number(delegate.tokenHoldersRepresentedAmount) / Number(governanceData.totalDelegates);
       const votesPercentage =
-        (Number(delegate.delegatedVotes) / Number(governanceData.delegatedVotes)) * 100 || 0;
+        Number(delegate.delegatedVotes) / Number(governanceData.delegatedVotes) || 0;
 
       return {
         name: names[delegate.user] || null,