feat: fix token decimal bugs

Misfits-Labs · Dec 6, 2023 · 68bd761 · 68bd761
1 parent eec2e73
commit 68bd761
Show file tree

Hide file tree

Showing 24 changed files with 152 additions and 110 deletions.
diff --git a/deployed-addresses.json b/deployed-addresses.json
@@ -5,9 +5,12 @@
             "contracts": {
                 "WegaERC20Escrow": {
                     "address": "0x1fFd5291E09264174d9956187cf8eFAE01E34875",
-                    "legacyAddresses": [],
+                    "legacyAddresses": [
+                        "0x2EE1d66d4c62a8c648f36fC8Faa7f8454F470520",
+                        "0x65BdAB5722E4f5F7c377d73d5c0073Bb0671597d"
+                    ],
                     "deploymentBlock": null,
-                    "implementation": "0x65BdAB5722E4f5F7c377d73d5c0073Bb0671597d"
+                    "implementation": "0xed4a0cb18aF2D6b022F8f99Cf09b91aa06A9513d"
                 },
                 "WegaERC20Dummy": {
                     "address": "0x0000000000000000000000000000000000000000"
@@ -37,10 +40,10 @@
                     "implementation": "0x720736cd88D57aF277A62495037Ce51788681B71"
                 },
                 "FeeManager": {
-                    "address": "0xE38d4530337a45C6D0C061f108e5AF040FCC175c",
+                    "address": "0x679e91BAb4fA83c5d0543c460A41CEc52E6A6fd1",
                     "legacyAddresses": [],
                     "deploymentBlock": null,
-                    "implementation": "0xc484aC8D7385dFbA73977832c9eb6413823de3A9"
+                    "implementation": "0xfB244ac04620695e40bc165e99C1C1381B797DA8"
                 },
                 "WegaRandomizer": {
                     "address": "0x0000000000000000000000000000000000000000"

diff --git a/src/common/ButtonForClaiming/index.tsx b/src/common/ButtonForClaiming/index.tsx
@@ -8,9 +8,10 @@ import 'twin.macro'
 
 interface ButtonForClaimingProps {
  game: Wega;
+ tokenDecimals: number;
 }
 
-export const ButtonForClaiming = ({ game  }: ButtonForClaimingProps) => {
+export const ButtonForClaiming = ({ game, tokenDecimals  }: ButtonForClaimingProps) => {
   const { wallet } = useWegaStore()
   const { openConnectModal } = useConnectModal();
 
@@ -20,11 +21,11 @@ export const ButtonForClaiming = ({ game  }: ButtonForClaimingProps) => {
     showModal(MODAL_TYPES.CLAIM_MODAL, {
       game,
       wallet,
+      tokenDecimals,
       hide: hideModal,
     }, true); 
   }
-
- return (!wallet && openConnectModal ?
+ return tokenDecimals && (!wallet && openConnectModal ?
    <Button 
        buttonType="primary"  
        className="flex items-center"
@@ -33,7 +34,7 @@ export const ButtonForClaiming = ({ game  }: ButtonForClaimingProps) => {
      Claim
      <DownloadIcon tw="h-[16px] w-[16px] ms-[5px]" />
    </Button> :  
-     <Button buttonType="primary" className="flex items-center w-[max-content]" onClick={() => handleClaim(wallet)}>
+     <Button buttonType="primary" className="flex items-center w-[max-content]" onClick={() => handleClaim(wallet)} >
        Claim
      <DownloadIcon tw="h-[16px] w-[16px] ms-[5px] dark:stroke-blanc" />
     </Button> 

diff --git a/src/common/ClaimBar/index.tsx b/src/common/ClaimBar/index.tsx
@@ -1,4 +1,4 @@
-import { formatEther } from 'ethers';
+import { formatUnits } from 'ethers'
 import { 
  GameTypeBadgeWrapper, 
  DateColumn, 
@@ -26,6 +26,7 @@ import { selectGameById } from '../../components/WegaGames/apiSlice';
 import { useSelector } from 'react-redux' 
 import { ButtonForClaiming } from '../ButtonForClaiming';
 import { constructBlockExplorerHash } from '../GameBar/utils';
+import { SupportedWagerTokenAddresses } from '../../models/constants';
 import { Link } from 'react-router-dom'
 import { 
   NormalText, 
@@ -43,7 +44,7 @@ interface ClaimBarProps {
   networkId: number;
   game?: Wega;
 }
-
+// TODO move token decimals into game props (URGENT)
 function ClaimBar({ 
   gameId,
   networkId,
@@ -55,13 +56,14 @@ function ClaimBar({
 }: { gameId: number, count: number  } & React.Attributes & Partial<React.AllHTMLAttributes<HTMLDivElement>> & ClaimBarProps) {
   let claimableGame = useSelector(state => selectGameById(state, gameId));
   if(game) claimableGame = game;
+  const tokenDecimals: number = SupportedWagerTokenAddresses[claimableGame?.wager.wagerCurrency as AllPossibleCurrencyTypes][claimableGame?.networkId as number].decimals as number;
   return claimableGame && (
    <BarWrapper tw="grid grid-cols-10 w-full justify-between" {...rest}>
     <Count tw="w-[fit-content]">{parseBarCount(count)}</Count>
     {/* date */}
     <DateColumn>{dateFromTs(new Date(claimableGame.createdAt as string).getTime() * 1000)}</DateColumn>
     <WagerTypeBadgeWrapper tw="col-span-3 w-[fit-content]">
-      <BadgeText>{formatEther(claimableGame.wager.wagerAmount)}</BadgeText>
+      <BadgeText>{Number(parseFloat(formatUnits(BigInt(claimableGame.wager.wagerAmount), tokenDecimals)).toFixed(0))}</BadgeText>
       <BadgeIcon>{renderWagerBadge(claimableGame.wager.wagerType, claimableGame.wager.wagerCurrency)}</BadgeIcon>
       <BadgeText>{claimableGame.wager.wagerCurrency}</BadgeText>
     </WagerTypeBadgeWrapper>
@@ -79,7 +81,7 @@ function ClaimBar({
           <Link to={constructBlockExplorerHash(networkId, claimableGame.transactionHash as HexishString)} target="_blank" rel="noreferrer"><ArrowTrSquareIcon /></Link>
         </div>
         {/* render for a joinable game */}
-        <ButtonForClaiming  game={claimableGame} />
+        <ButtonForClaiming  game={claimableGame} tokenDecimals={tokenDecimals} />
       </div>
     </div>
    </BarWrapper>

diff --git a/src/common/GameBar/index.tsx b/src/common/GameBar/index.tsx
@@ -23,7 +23,7 @@ import { dateFromTs } from '../../utils';
 import { BarDiceIcon, BarCoinIcon, USDCIcon, USDTIcon, ArrowTrSquareIcon } from '../../assets/icons';
 import { selectGameById } from '../../components/WegaGames/apiSlice';
 import { GameBarLoadingSkeleton } from '../GameBar/GameBarLoadingSkeleton';
-import { formatEther } from 'ethers';
+import { formatUnits } from 'ethers';
 import { ButtonForJoinableGame } from '../ButtonForJoinableGame';
 import { ButtonForWaitingGame } from '../ButtonForWaitingGame';
 import { useWegaStore } from '../../hooks'
@@ -32,6 +32,7 @@ import {
   NormalText, 
 } from "../../components/CreateGameCard/types";
 import { Link } from 'react-router-dom';
+import { SupportedWagerTokenAddresses } from '../../models/constants';
 import 'twin.macro';
 
 export const BADGE_TEXTS: any = {
@@ -51,6 +52,8 @@ function GameBar({
 }: { gameId: number } & React.Attributes & Partial<React.AllHTMLAttributes<HTMLDivElement>> & GameBarProps) {
   const game = useSelector(state => selectGameById(state, gameId));
   const { user, network } = useWegaStore();
+  const tokenDecimals: number = SupportedWagerTokenAddresses[game?.wager.wagerCurrency as AllPossibleCurrencyTypes][game?.networkId as number].decimals as number;
+
   return game && user?.uuid && network ? (
    <BarWrapper tw="w-full grid grid-cols-5 " {...rest}>
     {/* date */}
@@ -62,12 +65,12 @@ function GameBar({
     </GameTypeBadgeWrapper>
 
     <WagerTypeBadgeWrapper >
-     <BadgeText>{formatEther(game.wager.wagerAmount)}</BadgeText>
+     <BadgeText>{Number(parseFloat(formatUnits(BigInt(game.wager.wagerAmount), tokenDecimals)).toFixed(0))}</BadgeText>
      <BadgeIcon>{renderWagerBadge(game.wager.wagerType, game.wager.wagerCurrency)}</BadgeIcon>
      <BadgeText>{game.wager.wagerCurrency}</BadgeText>
     </WagerTypeBadgeWrapper>
-    {/* escrow link button */}
 
+    {/* escrow link button */}
     {/* render for a joinable game */}
 
     {/* tx hash */}

diff --git a/src/common/modals/ClaimModal.tsx b/src/common/modals/ClaimModal.tsx
@@ -1,4 +1,4 @@
-import { formatEther } from 'ethers';
+import { formatUnits } from 'ethers';
 import tw, { styled } from 'twin.macro';
 import { WinnerDeclarationContainer, GradientDiv } from './types';
 import { NormalText, SmallText } from '../../components/CreateGameCard/types';
@@ -10,6 +10,7 @@ import { useTokenUSDValue } from '../../hooks';
 import { useWithdrawMutation, useGetClaimAmountQuery } from './blockchainApiSlice'; 
 import { useUpdateGameMutation } from '../../components/PlayGameSection/apiSlice'; 
 import { miniWalletAddress, capitalize, toastSettings, parseError } from '../../utils';
+
 import Button from '../Button';
 import WalletAvatar from "../../common/WalletAvatar";
 import toast from 'react-hot-toast';
@@ -20,10 +21,11 @@ export interface ClaimModalProps {
   hide: any;
   game: Wega;
   wallet: any;
+  tokenDecimals: number;
 }
 
 
-export const ClaimModal = ({ hide, game, wallet
+export const ClaimModal = ({ hide, game, wallet, tokenDecimals
 }: ClaimModalProps) => {
   const [feeAmountIndex, sendAmountIndex] = [0, 1]
   const [claim, claimQuery] = useWithdrawMutation();
@@ -44,10 +46,9 @@ export const ClaimModal = ({ hide, game, wallet
       toast.error(message, { ...toastSettings('error', 'bottom-center') as any });      
     }
   };
-  const wagerUSDValue = useTokenUSDValue(game.wager.wagerCurrency, Number(formatEther(game.wager.wagerAmount)));
-  // console.log(feeTaker)
-  // console.log(game.wager)
-  return (
+  const wagerUSDValue = useTokenUSDValue(game.wager.wagerCurrency, Number(formatUnits(game.wager.wagerAmount, tokenDecimals)));
+  console.log(Number(formatUnits(game.wager.wagerAmount, tokenDecimals)))
+  return tokenDecimals && (
    <WinnerDeclarationContainer tw="items-start p-[24px] gap-y-[16px] min-w-[340px]">
     <div tw="flex justify-end w-full">
       <button tw="w-[fit-content]" onClick={hide}><SmallText tw="text-left">Close</SmallText></button>
@@ -69,8 +70,8 @@ export const ClaimModal = ({ hide, game, wallet
       <div tw="flex flex-row gap-x-[11px] items-center rounded-[5px] bg-[#3A3A3A] w-full p-[5px]">
        <BadgeIcon size="44px">{renderWagerBadge(game.wager.wagerType, game.wager.wagerCurrency)}</BadgeIcon>
        <div tw="flex flex-col gap-y-[11px]">
-        <NormalText tw="text-blanc">{formatEther(game.wager.wagerAmount)} USDC</NormalText>
-        <NormalText tw="text-shinishi">${formatEther(game.wager.wagerAmount)}</NormalText>
+        <NormalText tw="text-blanc">{formatUnits(game.wager.wagerAmount, tokenDecimals)} USDC</NormalText>
+        <NormalText tw="text-shinishi">${formatUnits(game.wager.wagerAmount, tokenDecimals)}</NormalText>
        </div>
       </div>
      </div>
@@ -110,7 +111,7 @@ export const ClaimModal = ({ hide, game, wallet
       <NormalText tw="dark:text-shinishi">Total claim before fees</NormalText>
       {
         !calculateFeesQuery.data ? 'calculating...' : <NormalText>{
-          Number(formatEther(calculateFeesQuery.data[feeAmountIndex])) + Number(formatEther(calculateFeesQuery.data[sendAmountIndex])) 
+          parseFloat(String((Number(formatUnits(calculateFeesQuery.data[feeAmountIndex], tokenDecimals)) + Number(formatUnits(calculateFeesQuery.data[sendAmountIndex], tokenDecimals))/2))).toFixed(0) 
         } {game.wager.wagerCurrency}</NormalText>
       }
      </div>
@@ -130,7 +131,7 @@ export const ClaimModal = ({ hide, game, wallet
           <NormalText tw="dark:text-shinishi">You pay</NormalText>
           {
             !calculateFeesQuery.data ? 'calculating...' : <NormalText>{
-              parseFloat(formatEther(calculateFeesQuery.data[feeAmountIndex])).toFixed(2)
+              parseFloat(formatUnits(calculateFeesQuery.data[feeAmountIndex], tokenDecimals) ).toFixed(2)
             } {game.wager.wagerCurrency}</NormalText>
           }
         </div>
@@ -140,7 +141,7 @@ export const ClaimModal = ({ hide, game, wallet
       <NormalText tw="dark:text-shinishi">Net winnings</NormalText>
       {
         !calculateFeesQuery.data ? 'calculating...' : <NormalText>{
-          formatEther(calculateFeesQuery.data[sendAmountIndex])
+          formatUnits(calculateFeesQuery.data[sendAmountIndex], tokenDecimals)
         } {game.wager.wagerCurrency}</NormalText>
       }
     </GradientDiv>

diff --git a/src/common/modals/CoinflipWinnerModal.tsx b/src/common/modals/CoinflipWinnerModal.tsx
@@ -6,7 +6,9 @@ import { BadgeIcon, renderWagerBadge } from "../GameBar";
 import Button from '../Button';
 import 'twin.macro';
 import { AllPossibleCurrencyTypes, AllPossibleWagerTypes, AllPossibleWegaTypes} from '../../models';
-import { BigNumberish, formatEther } from 'ethers';
+import { SupportedWagerTokenAddresses } from '../../models/constants';
+
+import { BigNumberish, formatUnits } from 'ethers';
 import { Link } from 'react-router-dom';
 import { CoinflipWinnerLogo, CoinflipLoserLogo } from './GameResolutionImages'
 
@@ -15,6 +17,7 @@ export interface CoinflipWinnerModalProps {
   wagerCurrency: AllPossibleCurrencyTypes;
   wagerType: AllPossibleWagerTypes;
   wagerAmount: BigNumberish;
+  networkId: number;
   winnerFlipChoice: number;
   loserFlipChoice: number;
   hide: any;
@@ -26,7 +29,10 @@ const CoinflipWinnerModal = ({
   wagerAmount, 
   gameType,
   winnerFlipChoice,
+  networkId,
   loserFlipChoice }: CoinflipWinnerModalProps) => {
+  const tokenDecimals: number = SupportedWagerTokenAddresses[wagerCurrency][networkId].decimals as number;
+
   return (
    <WinnerDeclarationContainer tw="items-center min-w-[546px]">
     <div tw="flex justify-end w-full">
@@ -48,7 +54,7 @@ const CoinflipWinnerModal = ({
       </div>
 
       <WagerTypeBadgeWrapper>
-        <BadgeText>{formatEther(wagerAmount)}</BadgeText>
+        <BadgeText>{Number(parseFloat(formatUnits(BigInt(wagerAmount), tokenDecimals)).toFixed(0))}</BadgeText>
         <BadgeIcon>{renderWagerBadge(wagerType, wagerCurrency)}</BadgeIcon>
         <BadgeText>{wagerCurrency}</BadgeText>
       </WagerTypeBadgeWrapper>

diff --git a/src/common/modals/DiceWinnerModal.tsx b/src/common/modals/DiceWinnerModal.tsx
@@ -6,7 +6,8 @@ import { BadgeIcon, renderWagerBadge } from "../GameBar";
 import Button from '../Button';
 import 'twin.macro';
 import { AllPossibleCurrencyTypes, AllPossibleWagerTypes, AllPossibleWegaTypes} from '../../models';
-import { BigNumberish, formatEther } from 'ethers';
+import { SupportedWagerTokenAddresses } from '../../models/constants';
+import { BigNumberish, formatUnits } from 'ethers';
 import { Link } from 'react-router-dom';
 import { DiceWinnerLogo, DiceLoserLogo } from './GameResolutionImages'
 
@@ -15,6 +16,7 @@ export interface DiceWinnerModalProps {
   wagerCurrency: AllPossibleCurrencyTypes,
   wagerType: AllPossibleWagerTypes,
   wagerAmount: BigNumberish,
+  networkId: number,
   results: any,
   hide: any,
 }
@@ -25,7 +27,9 @@ const DiceWinnerModal = ({
   wagerAmount, 
   gameType,
   results, 
+  networkId,
   }: DiceWinnerModalProps) => {
+  const tokenDecimals: number = SupportedWagerTokenAddresses[wagerCurrency][networkId].decimals as number;
 
   return (
    <WinnerDeclarationContainer tw="items-center min-w-[546px]">
@@ -50,7 +54,7 @@ const DiceWinnerModal = ({
       </div>
 
       <WagerTypeBadgeWrapper>
-        <BadgeText>{formatEther(wagerAmount)}</BadgeText>
+        <BadgeText>{Number(parseFloat(formatUnits(BigInt(wagerAmount), tokenDecimals)).toFixed(0))}</BadgeText>
         <BadgeIcon>{renderWagerBadge(wagerType, wagerCurrency)}</BadgeIcon>
         <BadgeText>{wagerCurrency}</BadgeText>
       </WagerTypeBadgeWrapper>

diff --git a/src/common/modals/GameWinnerDeclarationModal.tsx b/src/common/modals/GameWinnerDeclarationModal.tsx
@@ -6,15 +6,18 @@ import { BadgeIcon, renderWagerBadge } from "../GameBar";
 import Button from '../Button';
 import 'twin.macro';
 import { AllPossibleCurrencyTypes, AllPossibleWagerTypes, AllPossibleWegaTypes} from '../../models';
-import { BigNumberish, formatEther } from 'ethers';
+import { SupportedWagerTokenAddresses } from '../../models/constants';
+import { BigNumberish, formatUnits } from 'ethers';
 import { Link } from 'react-router-dom';
 import { DiceWinnerLogo, DiceLoserLogo } from './GameResolutionImages'
 
 export interface GameWinnerDeclarationModalProps {
   gameType: AllPossibleWegaTypes,
   wagerCurrency: AllPossibleCurrencyTypes,
   wagerType: AllPossibleWagerTypes,
+  tokenDecimals: number;
   wagerAmount: BigNumberish,
+  networkId: number,
   results: any,
   hide: any,
 }
@@ -24,8 +27,10 @@ export const GameWinnerDeclarationModal = ({
   wagerType, 
   wagerAmount, 
   gameType,
-  results, 
+  results,
+  networkId,
   }: GameWinnerDeclarationModalProps) => {
+  const tokenDecimals: number = SupportedWagerTokenAddresses[wagerCurrency][networkId].decimals as number;
 
   return (
    <WinnerDeclarationContainer tw="items-center min-w-[546px]">
@@ -50,7 +55,7 @@ export const GameWinnerDeclarationModal = ({
       </div>
 
       <WagerTypeBadgeWrapper>
-        <BadgeText>{formatEther(wagerAmount)}</BadgeText>
+        <BadgeText>{Number(parseFloat(formatUnits(BigInt(wagerAmount), tokenDecimals)).toFixed(0))}</BadgeText>
         <BadgeIcon>{renderWagerBadge(wagerType, wagerCurrency)}</BadgeIcon>
         <BadgeText>{wagerCurrency}</BadgeText>
       </WagerTypeBadgeWrapper>

diff --git a/src/common/modals/GlobalModal.tsx b/src/common/modals/GlobalModal.tsx
@@ -75,7 +75,6 @@ const GlobalModal: React.FC<GlobalModalProps> = ({ children }) => {
     modalProps: any,
     persist?: boolean,
     ) => {
-      console.log(modalType)
     setStore({
       ...store,
       modalType,