[Dashboard] Wrong token balance

packages/apps/dashboard/client/src/features/searchResults/model/addressDetailsSchema.ts

@@ -38,30 +38,20 @@ export type AddressDetailsWallet = z.infer<typeof walletSchema>;
 const escrowSchema = z.object({
   chainId: z.number().optional().nullable(),
   address: z.string().optional().nullable(),
-  balance: z
-    .string()
-    .optional()
-    .nullable()
-    .transform(transformOptionalTokenAmount),
+  balance: z.string().optional().nullable(),
   token: z.string().optional().nullable(),
   factoryAddress: z.string().optional().nullable(),
-  totalFundedAmount: z
-    .string()
-    .optional()
-    .nullable()
-    .transform(transformOptionalTokenAmount),
-  amountPaid: z
-    .string()
-    .optional()
-    .nullable()
-    .transform(transformOptionalTokenAmount),
+  totalFundedAmount: z.string().optional().nullable(),
+  amountPaid: z.string().optional().nullable(),
   status: z.string().optional().nullable(),
   manifest: z.string().optional().nullable(),
   launcher: z.string().optional().nullable(),
   exchangeOracle: z.string().optional().nullable(),
   recordingOracle: z.string().optional().nullable(),
   reputationOracle: z.string().optional().nullable(),
   finalResultsUrl: z.string().nullable(),
+  tokenSymbol: z.string().optional().nullable(),
+  tokenDecimals: z.number().optional().nullable(),
 });
 
 export type AddressDetailsEscrow = z.infer<typeof escrowSchema>;

packages/apps/dashboard/client/src/features/searchResults/ui/EscrowAddress.tsx

@@ -10,14 +10,14 @@ import { AddressDetailsEscrow } from '../model/addressDetailsSchema';
 
 import HmtBalance from './HmtBalance';
 import TitleSectionWrapper from './TitleSectionWrapper';
+import TokenAmount from './TokenAmount';
 
 type Props = {
   data: AddressDetailsEscrow;
 };
 
 const EscrowAddress: FC<Props> = ({ data }) => {
   const {
-    token,
     balance,
     factoryAddress,
     totalFundedAmount,
@@ -27,16 +27,26 @@ const EscrowAddress: FC<Props> = ({ data }) => {
     exchangeOracle,
     recordingOracle,
     reputationOracle,
+    tokenSymbol,
   } = data;
+  const isHmt = tokenSymbol === 'HMT';
   return (
     <SectionWrapper>
       <Stack gap={4}>
         <TitleSectionWrapper title="Token">
-          <Typography variant="body2">{token}</Typography>
+          <Typography variant="body2">{tokenSymbol}</Typography>
         </TitleSectionWrapper>
         {balance !== undefined && balance !== null ? (
           <TitleSectionWrapper title="Balance">
-            <HmtBalance balance={balance} />
+            {isHmt ? (
+              <HmtBalance balance={balance} />
+            ) : (
+              <TokenAmount
+                amount={balance}
+                tokenSymbol={tokenSymbol}
+                alreadyParsed
+              />
+            )}
           </TitleSectionWrapper>
         ) : null}
         <TitleSectionWrapper
@@ -46,30 +56,18 @@ const EscrowAddress: FC<Props> = ({ data }) => {
           <Typography variant="body2">{factoryAddress}</Typography>
         </TitleSectionWrapper>
         <TitleSectionWrapper title="Total Funded Amount">
-          <Stack direction="row" whiteSpace="nowrap">
-            <Typography variant="body2">{totalFundedAmount}</Typography>
-            <Typography
-              component="span"
-              variant="body2"
-              ml={0.5}
-              color="text.secondary"
-            >
-              HMT
-            </Typography>
-          </Stack>
+          <TokenAmount
+            amount={totalFundedAmount}
+            tokenSymbol={tokenSymbol}
+            alreadyParsed
+          />
         </TitleSectionWrapper>
         <TitleSectionWrapper title="Paid Amount">
-          <Stack direction="row" whiteSpace="nowrap">
-            <Typography variant="body2">{amountPaid}</Typography>
-            <Typography
-              component="span"
-              variant="body2"
-              ml={0.5}
-              color="text.secondary"
-            >
-              HMT
-            </Typography>
-          </Stack>
+          <TokenAmount
+            amount={amountPaid}
+            tokenSymbol={tokenSymbol}
+            alreadyParsed
+          />
         </TitleSectionWrapper>
 
         <TitleSectionWrapper title="Status">

packages/apps/dashboard/client/src/features/searchResults/ui/HmtBalance.tsx

@@ -4,16 +4,15 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
 import useHmtPrice from '@/shared/api/useHmtPrice';
-import { useIsMobile } from '@/shared/hooks/useBreakpoints';
-import FormattedNumber from '@/shared/ui/FormattedNumber';
+
+import TokenAmount from './TokenAmount';
 
 type Props = {
-  balance?: number | null;
+  balance?: number | string | null;
 };
 
 const HmtBalance: FC<Props> = ({ balance }) => {
   const { data, isError, isPending } = useHmtPrice();
-  const isMobile = useIsMobile();
 
   if (isError) {
     return <span>N/A</span>;
@@ -29,16 +28,9 @@ const HmtBalance: FC<Props> = ({ balance }) => {
 
   return (
     <Stack flexDirection="row" whiteSpace="nowrap">
-      <Typography variant="body2">
-        <FormattedNumber value={_balance} decimalScale={isMobile ? 4 : 9} />
-      </Typography>
-      <Typography
-        component="span"
-        variant="body2"
-        ml={0.5}
-        color="text.secondary"
-      >
-        {`HMT($${balanceInDollars})`}
+      <TokenAmount amount={_balance} alreadyParsed />
+      <Typography component="span" variant="body2" color="text.secondary">
+        {`($${balanceInDollars})`}
       </Typography>
     </Stack>
   );

packages/apps/dashboard/client/src/features/searchResults/ui/StakeInfo.tsx

@@ -3,43 +3,21 @@ import { FC } from 'react';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
-import { useIsMobile } from '@/shared/hooks/useBreakpoints';
-import FormattedNumber from '@/shared/ui/FormattedNumber';
 import SectionWrapper from '@/shared/ui/SectionWrapper';
 
+import TokenAmount from './TokenAmount';
+
 type Props = {
   amountStaked?: number | null;
   amountLocked?: number | null;
   amountWithdrawable?: number | null;
 };
 
-const renderAmount = (amount: number | null | undefined, isMobile: boolean) => {
-  return (
-    <Stack direction="row" whiteSpace="nowrap">
-      <Typography variant="body2">
-        <FormattedNumber
-          value={(amount || 0) * 1e18}
-          decimalScale={isMobile ? 4 : 9}
-        />
-      </Typography>
-      <Typography
-        variant="body2"
-        color="text.secondary"
-        component="span"
-        ml={0.5}
-      >
-        HMT
-      </Typography>
-    </Stack>
-  );
-};
-
 const StakeInfo: FC<Props> = ({
   amountStaked,
   amountLocked,
   amountWithdrawable,
 }) => {
-  const isMobile = useIsMobile();
   if (!amountStaked && !amountLocked && !amountWithdrawable) return null;
 
   return (
@@ -53,23 +31,23 @@ const StakeInfo: FC<Props> = ({
             <Typography variant="subtitle2" width={300}>
               Staked Tokens
             </Typography>
-            {renderAmount(amountStaked, isMobile)}
+            <TokenAmount amount={amountStaked} />
           </Stack>
         )}
         {Number.isFinite(amountLocked) && (
           <Stack gap={{ xs: 1, md: 0 }} direction={{ sm: 'column', md: 'row' }}>
             <Typography variant="subtitle2" width={300}>
               Locked Tokens
             </Typography>
-            {renderAmount(amountLocked, isMobile)}
+            <TokenAmount amount={amountLocked} />
           </Stack>
         )}
         {Number.isFinite(amountWithdrawable) && (
           <Stack gap={{ xs: 1, md: 0 }} direction={{ sm: 'column', md: 'row' }}>
             <Typography variant="subtitle2" width={300}>
               Withdrawable Tokens
             </Typography>
-            {renderAmount(amountWithdrawable, isMobile)}
+            <TokenAmount amount={amountWithdrawable} />
           </Stack>
         )}
       </Stack>

packages/apps/dashboard/client/src/features/searchResults/ui/TokenAmount.tsx

@@ -0,0 +1,42 @@
+import { FC } from 'react';
+
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
+import { useIsMobile } from '@/shared/hooks/useBreakpoints';
+import FormattedNumber from '@/shared/ui/FormattedNumber';
+
+type Props = {
+  amount: number | string | null | undefined;
+  tokenSymbol?: string | null | undefined;
+  alreadyParsed?: boolean;
+};
+
+const TokenAmount: FC<Props> = ({
+  amount,
+  tokenSymbol = 'HMT',
+  alreadyParsed = false,
+}) => {
+  const isMobile = useIsMobile();
+
+  return (
+    <Stack direction="row" whiteSpace="nowrap">
+      <Typography variant="body2">
+        <FormattedNumber
+          value={(Number(amount) || 0) * (alreadyParsed ? 1 : 1e18)}
+          decimalScale={isMobile ? 4 : 9}
+        />
+      </Typography>
+      <Typography
+        variant="body2"
+        color="text.secondary"
+        component="span"
+        ml={0.5}
+      >
+        {tokenSymbol}
+      </Typography>
+    </Stack>
+  );
+};
+
+export default TokenAmount;

packages/apps/dashboard/client/src/features/searchResults/ui/WalletAddress.tsx

@@ -3,8 +3,6 @@ import { FC } from 'react';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 
-import { useIsMobile } from '@/shared/hooks/useBreakpoints';
-import FormattedNumber from '@/shared/ui/FormattedNumber';
 import SectionWrapper from '@/shared/ui/SectionWrapper';
 
 import {
@@ -18,6 +16,7 @@ import KVStore from './KvStore';
 import ReputationScore from './ReputationScore';
 import StakeInfo from './StakeInfo';
 import TitleSectionWrapper from './TitleSectionWrapper';
+import TokenAmount from './TokenAmount';
 
 type Props = {
   data: AddressDetailsWallet | AddressDetailsOperator;
@@ -31,7 +30,6 @@ const WalletAddress: FC<Props> = ({ data }) => {
     reputation,
     amountWithdrawable,
   } = data;
-  const isMobile = useIsMobile();
   const isWallet = 'totalHMTAmountReceived' in data;
 
   return (
@@ -56,20 +54,7 @@ const WalletAddress: FC<Props> = ({ data }) => {
               title="Earned Payouts"
               tooltip="Total amount earned by participating in jobs"
             >
-              <Typography variant="body2">
-                <FormattedNumber
-                  value={(data?.totalHMTAmountReceived || 0) * 1e18}
-                  decimalScale={isMobile ? 4 : 9}
-                />
-              </Typography>
-              <Typography
-                component="span"
-                variant="body2"
-                ml={0.5}
-                color="text.secondary"
-              >
-                HMT
-              </Typography>
+              <TokenAmount amount={data?.totalHMTAmountReceived} />
             </TitleSectionWrapper>
           )}
         </Stack>