USD value for token transfers and more (#1360)

* show usd value in token transfers views

* txs table: collapse from/to into one column on md screens

* update tooltip text for daily txs chart

* update styles for "Relayed" OP withdrawal status

* update screenshots

* [skip ci] migrate from "ethereum-blockies-base64" to "blo"

mocks/tokens/tokenTransfer.ts

@@ -25,7 +25,7 @@ export const erc20: TokenTransfer = {
     address: '0x55d536e4d6c1993d8ef2e2a4ef77f02088419420',
     circulating_market_cap: '117629601.61913824',
     decimals: '18',
-    exchange_rate: null,
+    exchange_rate: '42',
     holders: '46554',
     name: 'ARIANEE',
     symbol: 'ARIA',

mocks/txs/tx.ts

@@ -124,6 +124,7 @@ export const withTokenTransfer: Transaction = {
     tokenTransferMock.erc1155C,
     tokenTransferMock.erc1155D,
   ],
+  token_transfers_overflow: true,
   tx_types: [
     'token_transfer',
   ],

package.json

@@ -55,12 +55,12 @@
     "@web3modal/ethereum": "^2.6.2",
     "@web3modal/react": "^2.6.2",
     "bignumber.js": "^9.1.0",
+    "blo": "^1.1.1",
     "chakra-react-select": "^4.4.3",
     "crypto-js": "^4.1.1",
     "d3": "^7.6.1",
     "dayjs": "^1.11.5",
     "dom-to-image": "^2.6.0",
-    "ethereum-blockies-base64": "^1.0.2",
     "framer-motion": "^6.5.1",
     "gradient-avatar": "^1.0.2",
     "graphiql": "^2.2.0",

ui/home/indicators/utils/indicators.tsx

@@ -15,7 +15,7 @@ const dailyTxsIndicator: TChainIndicator<'homepage_chart_txs'> = {
   title: 'Daily transactions',
   value: (stats) => Number(stats.transactions_today).toLocaleString(undefined, { maximumFractionDigits: 2, notation: 'compact' }),
   icon: <Icon as={ txIcon } boxSize={ 6 } bgColor="#56ACD1" borderRadius="base" color="white"/>,
-  hint: `The total daily number of transactions on the blockchain for the last month.`,
+  hint: `Number of transactions yesterday (0:00 - 23:59 UTC). The chart displays daily transactions for the past 30 days.`,
   api: {
     resourceName: 'homepage_chart_txs',
     dataFn: (response) => ([ {

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -1,10 +1,10 @@
 import { Flex, Skeleton } from '@chakra-ui/react';
-import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import eastArrowIcon from 'icons/arrows/east.svg';
+import getCurrencyValue from 'lib/getCurrencyValue';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import Icon from 'ui/shared/chakra/Icon';
 import Tag from 'ui/shared/chakra/Tag';
@@ -37,15 +37,14 @@ const TokenTransferListItem = ({
   enableTimeIncrement,
   isLoading,
 }: Props) => {
-  const value = (() => {
-    if (!('value' in total)) {
-      return null;
-    }
-
-    return BigNumber(total.value).div(BigNumber(10 ** Number(total.decimals))).dp(8).toFormat();
-  })();
-
   const timeAgo = useTimeAgoIncrement(timestamp, enableTimeIncrement);
+  const { usd, valueStr } = 'value' in total ? getCurrencyValue({
+    value: total.value,
+    exchangeRate: token.exchange_rate,
+    accuracy: 8,
+    accuracyUsd: 2,
+    decimals: total.decimals || '0',
+  }) : { usd: null, valueStr: null };
 
   const addressWidth = `calc((100% - ${ baseAddress ? '50px - 24px' : '24px - 24px' }) / 2)`;
   return (
@@ -112,10 +111,13 @@ const TokenTransferListItem = ({
           width={ addressWidth }
         />
       </Flex>
-      { value && (
+      { valueStr && (
         <Flex columnGap={ 2 } w="100%">
           <Skeleton isLoaded={ !isLoading } fontWeight={ 500 } flexShrink={ 0 }>Value</Skeleton>
-          <Skeleton isLoaded={ !isLoading } color="text_secondary"><span>{ value }</span></Skeleton>
+          <Skeleton isLoaded={ !isLoading } color="text_secondary">
+            <span>{ valueStr }</span>
+            { usd && <span> (${ usd })</span> }
+          </Skeleton>
         </Flex>
       ) }
     </ListItemMobile>

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -1,9 +1,9 @@
 import { Tr, Td, Flex, Skeleton, Box } from '@chakra-ui/react';
-import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
+import getCurrencyValue from 'lib/getCurrencyValue';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import Tag from 'ui/shared/chakra/Tag';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
@@ -35,6 +35,13 @@ const TokenTransferTableItem = ({
   isLoading,
 }: Props) => {
   const timeAgo = useTimeAgoIncrement(timestamp, enableTimeIncrement);
+  const { usd, valueStr } = 'value' in total ? getCurrencyValue({
+    value: total.value,
+    exchangeRate: token.exchange_rate,
+    accuracy: 8,
+    accuracyUsd: 2,
+    decimals: total.decimals || '0',
+  }) : { usd: null, valueStr: null };
 
   return (
     <Tr alignItems="top">
@@ -111,9 +118,16 @@ const TokenTransferTableItem = ({
         />
       </Td>
       <Td isNumeric verticalAlign="top">
-        <Skeleton isLoaded={ !isLoading } display="inline-block" my="7px" wordBreak="break-all">
-          { 'value' in total && BigNumber(total.value).div(BigNumber(10 ** Number(total.decimals))).dp(8).toFormat() }
-        </Skeleton>
+        { valueStr && (
+          <Skeleton isLoaded={ !isLoading } display="inline-block" mt="7px" wordBreak="break-all">
+            { valueStr }
+          </Skeleton>
+        ) }
+        { usd && (
+          <Skeleton isLoaded={ !isLoading } color="text_secondary" mt="10px" ml="auto" w="min-content">
+            <span>${ usd }</span>
+          </Skeleton>
+        ) }
       </Td>
     </Tr>
   );

ui/shared/entities/address/AddressIdenticon.tsx

@@ -19,11 +19,11 @@ const Icon = dynamic(
       }
 
       case 'blockie': {
-        const makeBlockie = (await import('ethereum-blockies-base64')).default;
+        const { blo } = (await import('blo'));
 
         // eslint-disable-next-line react/display-name
         return (props: IconProps) => {
-          const data = makeBlockie(props.hash);
+          const data = blo(props.hash as `0x${ string }`, props.size);
           return (
             <Image
               src={ data }

ui/shared/entities/tx/TxEntity.tsx

@@ -36,13 +36,13 @@ const Icon = (props: IconProps) => {
   );
 };
 
-type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'hash'>;
+type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'hash' | 'text'>;
 
 const Content = chakra((props: ContentProps) => {
   return (
     <EntityBase.Content
       { ...props }
-      text={ props.hash }
+      text={ props.text ?? props.hash }
     />
   );
 });
@@ -64,6 +64,7 @@ const Container = EntityBase.Container;
 
 export interface EntityProps extends EntityBase.EntityBaseProps {
   hash: string;
+  text?: string;
 }
 
 const TxEntity = (props: EntityProps) => {

ui/shared/verificationSteps/VerificationStep.tsx

@@ -1,12 +1,14 @@
 import { Text, Icon, HStack } from '@chakra-ui/react';
 import React from 'react';
 
+import type { Step } from './types';
+
 import arrowIcon from 'icons/arrows/east.svg';
 import finalizedIcon from 'icons/finalized.svg';
 import unfinalizedIcon from 'icons/unfinalized.svg';
 
 type Props = {
-  step: string;
+  step: Step;
   isLast: boolean;
   isPassed: boolean;
 }
@@ -17,7 +19,7 @@ const VerificationStep = ({ step, isLast, isPassed }: Props) => {
   return (
     <HStack gap={ 2 } color={ stepColor }>
       <Icon as={ isPassed ? finalizedIcon : unfinalizedIcon } boxSize={ 5 }/>
-      <Text color={ stepColor }>{ step }</Text>
+      <Text color={ stepColor }>{ typeof step === 'string' ? step : step.content }</Text>
       { !isLast && <Icon as={ arrowIcon } boxSize={ 5 }/> }
     </HStack>
   );

ui/shared/verificationSteps/VerificationSteps.pw.tsx

@@ -13,7 +13,7 @@ test('first step +@mobile +@dark-mode', async({ mount }) => {
   const component = await mount(
     <TestApp>
       <Box p={ 10 }>
-        <VerificationSteps step={ ZKEVM_L2_TX_STATUSES[0] } steps={ ZKEVM_L2_TX_STATUSES }/>
+        <VerificationSteps currentStep={ ZKEVM_L2_TX_STATUSES[0] } steps={ ZKEVM_L2_TX_STATUSES }/>
       </Box>
     </TestApp>,
   );
@@ -25,7 +25,7 @@ test('second status', async({ mount }) => {
 
   const component = await mount(
     <TestApp>
-      <VerificationSteps step={ ZKEVM_L2_TX_STATUSES[1] } steps={ ZKEVM_L2_TX_STATUSES }/>
+      <VerificationSteps currentStep={ ZKEVM_L2_TX_STATUSES[1] } steps={ ZKEVM_L2_TX_STATUSES }/>
     </TestApp>,
   );
 

ui/shared/verificationSteps/VerificationSteps.tsx

@@ -1,18 +1,23 @@
 import { Skeleton, chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import type { Step } from './types';
+
 import VerificationStep from './VerificationStep';
 
-export interface Props<T extends string> {
-  step: T;
-  steps: Array<T>;
+export interface Props {
+  currentStep: string;
+  steps: Array<Step>;
   isLoading?: boolean;
   rightSlot?: React.ReactNode;
   className?: string;
 }
 
-const VerificationSteps = <T extends string>({ step, steps, isLoading, rightSlot, className }: Props<T>) => {
-  const currentStepIndex = steps.indexOf(step);
+const VerificationSteps = ({ currentStep, steps, isLoading, rightSlot, className }: Props) => {
+  const currentStepIndex = steps.findIndex((step) => {
+    const label = typeof step === 'string' ? step : step.label;
+    return label === currentStep;
+  });
 
   return (
     <Skeleton
@@ -24,7 +29,12 @@ const VerificationSteps = <T extends string>({ step, steps, isLoading, rightSlot
       flexWrap="wrap"
     >
       { steps.map((step, index) => (
-        <VerificationStep step={ step } isLast={ index === steps.length - 1 && !rightSlot } isPassed={ index <= currentStepIndex } key={ step }/>
+        <VerificationStep
+          key={ currentStep }
+          step={ step }
+          isLast={ index === steps.length - 1 && !rightSlot }
+          isPassed={ index <= currentStepIndex }
+        />
       )) }
       { rightSlot }
     </Skeleton>

ui/shared/verificationSteps/types.ts

@@ -0,0 +1 @@
+export type Step = string | { label: string; content: React.ReactNode };

ui/token/TokenTransfer/TokenTransferListItem.tsx

@@ -1,10 +1,10 @@
 import { Flex, Skeleton } from '@chakra-ui/react';
-import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import eastArrowIcon from 'icons/arrows/east.svg';
+import getCurrencyValue from 'lib/getCurrencyValue';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import Icon from 'ui/shared/chakra/Icon';
 import Tag from 'ui/shared/chakra/Tag';
@@ -27,15 +27,14 @@ const TokenTransferListItem = ({
   tokenId,
   isLoading,
 }: Props) => {
-  const value = (() => {
-    if (!('value' in total)) {
-      return null;
-    }
-
-    return BigNumber(total.value).div(BigNumber(10 ** Number(total.decimals))).dp(8).toFormat();
-  })();
-
   const timeAgo = useTimeAgoIncrement(timestamp, true);
+  const { usd, valueStr } = 'value' in total ? getCurrencyValue({
+    value: total.value,
+    exchangeRate: token.exchange_rate,
+    accuracy: 8,
+    accuracyUsd: 2,
+    decimals: total.decimals || '0',
+  }) : { usd: null, valueStr: null };
 
   return (
     <ListItemMobile rowGap={ 3 } isAnimated>
@@ -72,15 +71,16 @@ const TokenTransferListItem = ({
           fontWeight="500"
         />
       </Flex>
-      { value && (token.type === 'ERC-20' || token.type === 'ERC-1155') && (
+      { valueStr && (token.type === 'ERC-20' || token.type === 'ERC-1155') && (
         <Flex columnGap={ 2 } w="100%">
           <Skeleton isLoaded={ !isLoading } flexShrink={ 0 } fontWeight={ 500 }>
             Value
           </Skeleton>
           <Skeleton isLoaded={ !isLoading } color="text_secondary">
-            <span>{ value }</span>
+            <span>{ valueStr }</span>
           </Skeleton>
           { token.symbol && <TruncatedValue isLoading={ isLoading } value={ token.symbol }/> }
+          { usd && <Skeleton isLoaded={ !isLoading } color="text_secondary"><span>(${ usd })</span></Skeleton> }
         </Flex>
       ) }
       { 'token_id' in total && (token.type === 'ERC-721' || token.type === 'ERC-1155') && (

ui/token/TokenTransfer/TokenTransferTableItem.tsx

@@ -1,10 +1,10 @@
 import { Tr, Td, Grid, Skeleton, Box } from '@chakra-ui/react';
-import BigNumber from 'bignumber.js';
 import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import eastArrowIcon from 'icons/arrows/east.svg';
+import getCurrencyValue from 'lib/getCurrencyValue';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import Icon from 'ui/shared/chakra/Icon';
 import Tag from 'ui/shared/chakra/Tag';
@@ -26,6 +26,13 @@ const TokenTransferTableItem = ({
   isLoading,
 }: Props) => {
   const timeAgo = useTimeAgoIncrement(timestamp, true);
+  const { usd, valueStr } = 'value' in total ? getCurrencyValue({
+    value: total.value,
+    exchangeRate: token.exchange_rate,
+    accuracy: 8,
+    accuracyUsd: 2,
+    decimals: total.decimals || '0',
+  }) : { usd: null, valueStr: null };
 
   return (
     <Tr alignItems="top">
@@ -91,9 +98,16 @@ const TokenTransferTableItem = ({
       ) }
       { (token.type === 'ERC-20' || token.type === 'ERC-1155') && (
         <Td isNumeric verticalAlign="top">
-          <Skeleton isLoaded={ !isLoading } my="7px">
-            { 'value' in total && BigNumber(total.value).div(BigNumber(10 ** Number(total.decimals))).dp(8).toFormat() }
-          </Skeleton>
+          { valueStr && (
+            <Skeleton isLoaded={ !isLoading } display="inline-block" mt="7px" wordBreak="break-all">
+              { valueStr }
+            </Skeleton>
+          ) }
+          { usd && (
+            <Skeleton isLoaded={ !isLoading } color="text_secondary" mt="10px" wordBreak="break-all">
+              <span>${ usd }</span>
+            </Skeleton>
+          ) }
         </Td>
       ) }
     </Tr>

ui/tx/TxDetails.tsx

@@ -167,7 +167,7 @@ const TxDetails = () => {
             hint="Status of the transaction confirmation path to L1"
             isLoading={ isPlaceholderData }
           >
-            <VerificationSteps step={ data.zkevm_status } steps={ ZKEVM_L2_TX_STATUSES } isLoading={ isPlaceholderData }/>
+            <VerificationSteps currentStep={ data.zkevm_status } steps={ ZKEVM_L2_TX_STATUSES } isLoading={ isPlaceholderData }/>
           </DetailsInfoItem>
         ) }
         { data.revert_reason && (
@@ -312,7 +312,7 @@ const TxDetails = () => {
             <span>[ Contract creation ]</span>
           ) }
         </DetailsInfoItem>
-        { data.token_transfers && <TxDetailsTokenTransfers data={ data.token_transfers } txHash={ data.hash }/> }
+        { data.token_transfers && <TxDetailsTokenTransfers data={ data.token_transfers } txHash={ data.hash } isOverflow={ data.token_transfers_overflow }/> }
 
         <DetailsInfoItemDivider/>