usd values

types/api/tokenTransfer.ts

@@ -11,5 +11,5 @@ export interface TokenTransfer {
   total: {
     value: string;
   };
-  exchangeRate: number;
+  exchange_rate: string;
 }

types/api/transaction.ts

@@ -35,7 +35,7 @@ export interface Transaction {
   decoded_input?: DecodedInput;
   token_transfers?: Array<TokenTransfer>;
   token_transfers_overflow: boolean;
-  exchange_rate: number;
+  exchange_rate: string;
 }
 
 export interface TransactionsResponse {

ui/shared/CurrencyValue.tsx

+import { Box, Text, chakra } from '@chakra-ui/react';
+import { utils, constants } from 'ethers';
+import React from 'react';
+
+interface Props {
+  value: string;
+  unit?: 'wei' | 'gwei' | 'ether';
+  currency?: string;
+  exchangeRate?: string;
+  className?: string;
+}
+
+const CurrencyValue = ({ value, currency = '', unit = 'wei', exchangeRate, className }: Props) => {
+  const valueBn = utils.parseUnits(value, unit);
+  const exchangeRateBn = utils.parseUnits(exchangeRate || '0', 'ether');
+  const usdBn = valueBn.mul(exchangeRateBn).div(constants.WeiPerEther);
+
+  return (
+    <Box as="span" className={ className }>
+      <Text as="span">
+        { Number(utils.formatUnits(valueBn)).toLocaleString() }{ currency ? ` ${ currency }` : '' }</Text>
+      { exchangeRate !== undefined && exchangeRate !== null &&
+        <Text as="span" variant="secondary" whiteSpace="pre" fontWeight={ 400 }> (${ utils.formatUnits(usdBn) })</Text> }
+    </Box>
+  );
+};
+
+export default React.memo(chakra(CurrencyValue));

ui/tx/TokenTransfer.tsx

@@ -6,13 +6,12 @@ import type { TokenTransfer as TTokenTransfer } from 'types/api/tokenTransfer';
 import rightArrowIcon from 'icons/arrows/east.svg';
 import { space } from 'lib/html-entities';
 import AddressLink from 'ui/shared/address/AddressLink';
+import CurrencyValue from 'ui/shared/CurrencyValue';
 import TokenSnippet from 'ui/shared/TokenSnippet';
 
 type Props = TTokenTransfer
 
-const TokenTransfer = ({ from, to, total, ...token }: Props) => {
-  // todo_tom API doesn't send exchange rate currently
-  // const usd = exchangeRate ? Number(total.value) / exchangeRate : 0;
+const TokenTransfer = ({ from, to, total, exchange_rate: exchangeRate, ...token }: Props) => {
   return (
     <Flex alignItems="center" flexWrap="wrap" columnGap={ 3 } rowGap={ 3 }>
       <Flex alignItems="center">
@@ -21,8 +20,7 @@ const TokenTransfer = ({ from, to, total, ...token }: Props) => {
         <AddressLink fontWeight="500" hash={ to.hash } truncation="constant"/>
       </Flex>
       <Text fontWeight={ 500 } as="span">For:{ space }
-        <Text fontWeight={ 600 } as="span">{ total.value }</Text>{ space }
-        { /* { usd > 0 && <Text fontWeight={ 400 } variant="secondary" as="span">(${ usd.toFixed(2) })</Text> } */ }
+        <CurrencyValue value={ total.value.replaceAll(',', '') } unit="ether" exchangeRate={ exchangeRate } fontWeight={ 600 }/>
       </Text>
       <TokenSnippet symbol={ token.token_symbol } hash={ token.token_address } name="Foo"/>
     </Flex>

ui/tx/TxDetails.tsx

@@ -19,6 +19,7 @@ import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import CurrencyValue from 'ui/shared/CurrencyValue';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
@@ -152,17 +153,13 @@ const TxDetails = () => {
         title="Value"
         hint="Value sent in the native token (and USD) if applicable."
       >
-        <Text>{ Number(utils.formatUnits(utils.parseUnits(String(data.value), 'wei'))) } { selectedNetwork?.currency }</Text>
-        { /* todo_tom API doesn't send exchange rate currently*/ }
-        { /* <Text variant="secondary" ml={ 1 }>(${ usdValue.toFixed(2) })</Text> */ }
+        <CurrencyValue value={ String(data.value) } currency={ selectedNetwork?.currency } exchangeRate={ data.exchange_rate }/>
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Transaction fee"
         hint="Total transaction fee."
       >
-        <Text>{ utils.formatUnits(utils.parseUnits(data.fee.value, 'wei')) } { selectedNetwork?.currency }</Text>
-        { /* todo_tom API doesn't send exchange rate currently*/ }
-        { /* <Text variant="secondary" ml={ 1 }>(${ tx.fee.value_usd.toFixed(2) })</Text> */ }
+        <CurrencyValue value={ String(data.fee.value) } currency={ selectedNetwork?.currency } exchangeRate={ data.exchange_rate }/>
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Gas price"
@@ -213,10 +210,8 @@ const TxDetails = () => {
           title="Burnt fees"
           hint={ `Amount of ${ selectedNetwork?.currency } burned for this transaction. Equals Block Base Fee per Gas * Gas Used.` }
         >
-          <Icon as={ flameIcon } boxSize={ 5 } color="gray.500"/>
-          <Text ml={ 1 } mr={ 1 }>{ utils.formatUnits(utils.parseUnits(String(data.tx_burnt_fee), 'wei')) } { selectedNetwork?.currency }</Text>
-          { /* todo_tom API doesn't send exchange rate currently*/ }
-          { /* <Text variant="secondary">(${ tx.burnt_fees.value_usd.toFixed(2) })</Text> */ }
+          <Icon as={ flameIcon } mr={ 1 } boxSize={ 5 } color="gray.500"/>
+          <CurrencyValue value={ String(data.tx_burnt_fee) } currency={ selectedNetwork?.currency } exchangeRate={ data.exchange_rate }/>
         </DetailsInfoItem>
       ) }
       <GridItem colSpan={{ base: undefined, lg: 2 }}>