From 10abf03908b89e9fd9c26f645d0d87d6659aad2b Mon Sep 17 00:00:00 2001
From: jordan <jordan.lesich@gmail.com>
Date: Fri, 14 Jun 2024 01:13:17 -0700
Subject: [PATCH] fix trailing decimalsin UI

---
 src/components/voting/VoteCard.tsx         |  7 ++++---
 src/components/voting/VoteResultsPanel.tsx | 11 +++++++----
 src/constants/addresses.ts                 |  2 +-
 src/types/common.ts                        |  7 +++++++
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/voting/VoteCard.tsx b/src/components/voting/VoteCard.tsx
index 8d61fca2..ff0f2ea9 100644
--- a/src/components/voting/VoteCard.tsx
+++ b/src/components/voting/VoteCard.tsx
@@ -12,10 +12,11 @@ import { CondensedChoiceData } from '../../pages/Vote';
 import { GsVoter } from '../../queries/getVoters';
 import { useMemo } from 'react';
 import { AddressAvatar } from '../AddressAvatar';
-import { Address, formatEther } from 'viem';
+import { Address } from 'viem';
 import { formatBigIntPercentage } from '../../utils/helpers';
 import { IconChevronDown, IconChevronUp } from '@tabler/icons-react';
 import classes from '../feed/FeedStyles.module.css';
+import { formatBalance } from '../../types/common';
 
 export const VoteCard = ({
   voter,
@@ -91,6 +92,7 @@ const ShipChoiceVoteBar = ({
   tokenSymbol?: string;
   didVote?: boolean;
 }) => {
+  const voteAmountDisplay = formatBalance(voteAmount);
   const votePercentage = formatBigIntPercentage(voteAmount, totalVotes);
   return (
     <Box mb="md">
@@ -104,8 +106,7 @@ const ShipChoiceVoteBar = ({
             mb={2}
           />
           <Text fz="xs">
-            {votePercentage}% Voted ({formatEther(voteAmount)}){' '}
-            {tokenSymbol || ''}
+            {votePercentage}% Voted ({voteAmountDisplay}) {tokenSymbol || ''}
           </Text>
         </Box>
       </Group>
diff --git a/src/components/voting/VoteResultsPanel.tsx b/src/components/voting/VoteResultsPanel.tsx
index ad7c776a..998d611c 100644
--- a/src/components/voting/VoteResultsPanel.tsx
+++ b/src/components/voting/VoteResultsPanel.tsx
@@ -19,6 +19,7 @@ import { CondensedChoiceData } from '../../pages/Vote';
 import { getContestVoters } from '../../queries/getVoters';
 import { VoteCard } from './VoteCard';
 import { useQuery } from '@tanstack/react-query';
+import { formatBalance } from '../../types/common';
 
 export const VoteResultsPanel = ({ ships }: { ships: ShipsCardUI[] }) => {
   const { contest, userVotes, tokenData } = useVoting();
@@ -94,7 +95,8 @@ export const VoteResultsPanel = ({ ships }: { ships: ShipsCardUI[] }) => {
                     totals?.totalUserVotes
                   )
                 : '0';
-              const tokenAmount = formatEther(BigInt(ship.vote?.amount || 0));
+
+              const tokenAmount = formatBalance(BigInt(ship.vote?.amount || 0));
 
               return (
                 <Box key={`total_v_${ship.id}`}>
@@ -116,7 +118,7 @@ export const VoteResultsPanel = ({ ships }: { ships: ShipsCardUI[] }) => {
               <Text fz="sm" component="span" fw={600}>
                 Total:{' '}
               </Text>
-              {formatEther(totals?.totalUserVotes || 0n)}{' '}
+              {formatBalance(totals?.totalUserVotes || 0n)}{' '}
               {tokenData.tokenSymbol}
             </Text>
           </Stack>
@@ -132,7 +134,8 @@ export const VoteResultsPanel = ({ ships }: { ships: ShipsCardUI[] }) => {
                   totals?.totalVotes
                 )
               : '0';
-            const tokenAmount = formatEther(BigInt(ship.choice?.voteTally));
+            const tokenAmount = formatBalance(BigInt(ship.choice?.voteTally));
+
             return (
               <Box key={`total_v_${ship.id}`}>
                 <Group gap="xs" mb="sm">
@@ -152,7 +155,7 @@ export const VoteResultsPanel = ({ ships }: { ships: ShipsCardUI[] }) => {
             <Text fz="sm" component="span" fw={600}>
               Total:{' '}
             </Text>
-            {formatEther(totals?.totalVotes || 0n)} {tokenData.tokenSymbol}
+            {formatBalance(totals?.totalVotes || 0n)} {tokenData.tokenSymbol}
           </Text>
         </Stack>
       </Flex>
diff --git a/src/constants/addresses.ts b/src/constants/addresses.ts
index 58cc33cc..8c317ede 100644
--- a/src/constants/addresses.ts
+++ b/src/constants/addresses.ts
@@ -8,7 +8,7 @@ export const ADDR_TESTNET: Record<string, Address> = {
   GM_FACTORY: '0x14e32E7893D6A1fA5f852d8B2fE8c57A2aB670ba',
   GS_FACTORY: '0x8D994BEef251e30C858e44eCE3670feb998CA77a',
   HATS_POSTER: '0x4F0dc1C7d91d914d921F3C9C188F4454AE260317',
-  VOTE_CONTEST: '0x7E1E70ef71A7EA8a3328822bA4410A82A73f575d',
+  VOTE_CONTEST: '0x3d06D95026696826B507D25cfBb86E4457F34eC5',
 } as const;
 
 export const ADDR_PROD: Record<string, Address> = {
diff --git a/src/types/common.ts b/src/types/common.ts
index 32dc1cb7..7eca8dc5 100644
--- a/src/types/common.ts
+++ b/src/types/common.ts
@@ -1,5 +1,7 @@
 // Arbitrary JSON type to ensure that non-JSON serializable types are not used
 
+import { formatEther } from 'viem';
+
 export type Json =
   | string
   | number
@@ -93,3 +95,8 @@ export enum VotingStage {
   Finalized,
   Unknown,
 }
+
+export const formatBalance = (balance?: bigint) => {
+  if (!balance || typeof balance !== 'bigint') return 0;
+  return Number(Number(formatEther(balance)).toFixed(2));
+};