token transfer update

types/api/addressParams.ts

 export interface AddressParam {
   hash: string;
   implementation_name: string;
-  name: string;
+  name: string | null;
   is_contract: boolean;
+  private_tags: Array<string> | null;
+  watchlist_names: Array<string> | null;
+  public_tags: Array<string> | null;
 }

types/api/tokenInfo.ts

+export type TokenType = 'ERC-20' | 'ERC-721' | 'ERC-1155';
+
+export interface TokenInfo {
+  address: string;
+  type: TokenType;
+  symbol: string | null;
+  name: string | null;
+  decimals: string | null;
+  holders: string | null;
+  exchange_rate: string | null;
+}
+
+export type TokenInfoGeneric<Type extends TokenType> = Omit<TokenInfo, 'type'> & { type: Type };

types/api/tokenTransfer.ts

 import type { AddressParam } from './addressParams';
+import type { TokenInfoGeneric } from './tokenInfo';
 
-export type ERC1155TotalPayload = {
+export type Erc20TotalPayload = {
+  decimals: string | null;
+  value: string;
+}
+
+export type Erc721TotalPayload = {
+  token_id: string;
+}
+
+export type Erc1155TotalPayload = {
+  decimals: string | null;
   value: string;
   token_id: string;
 }
 
 export type TokenTransfer = (
   {
-    token_type: 'ERC-20';
-    total: {
-      value: string;
-    };
+    token: TokenInfoGeneric<'ERC-20'>;
+    total: Erc20TotalPayload;
   } |
   {
-    token_type: 'ERC-721';
-    total: {
-      token_id: string;
-    };
+    token: TokenInfoGeneric<'ERC-721'>;
+    total: Erc721TotalPayload;
   } |
   {
-    token_type: 'ERC-1155';
-    total: ERC1155TotalPayload | Array<ERC1155TotalPayload>;
+    token: TokenInfoGeneric<'ERC-1155'>;
+    total: Erc1155TotalPayload | Array<Erc1155TotalPayload>;
   }
 ) & TokenTransferBase
 
 interface TokenTransferBase {
   type: 'token_transfer' | 'token_burning' | 'token_spawning' | 'token_minting';
-  txHash: string;
+  tx_hash: string;
   from: AddressParam;
   to: AddressParam;
-  token_address: string;
-  token_symbol: string;
-  exchange_rate: string;
 }

ui/shared/CurrencyValue.tsx

@@ -2,22 +2,18 @@ import { Box, Text, chakra } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
-import type { Unit } from 'types/unit';
-
-import getValueWithUnit from 'lib/getValueWithUnit';
-
 interface Props {
   value: string;
-  unit?: Unit;
   currency?: string;
   exchangeRate?: string | null;
   className?: string;
   accuracy?: number;
   accuracyUsd?: number;
+  decimals?: string | null;
 }
 
-const CurrencyValue = ({ value, currency = '', unit, exchangeRate, className, accuracy, accuracyUsd }: Props) => {
-  const valueCurr = getValueWithUnit(value, unit);
+const CurrencyValue = ({ value, currency = '', decimals, exchangeRate, className, accuracy, accuracyUsd }: Props) => {
+  const valueCurr = BigNumber(value).div(BigNumber(10 ** Number(decimals || '18')));
   const valueResult = accuracy ? valueCurr.dp(accuracy).toFormat() : valueCurr.toFormat();
 
   let usdContent;

ui/shared/TokenLogo.tsx

@@ -7,7 +7,7 @@ const EmptyElement = () => null;
 
 interface Props {
   hash: string;
-  name?: string;
+  name?: string | null;
   className?: string;
 }
 

ui/shared/TokenSnippet.tsx

@@ -5,9 +5,9 @@ import link from 'lib/link/link';
 import TokenLogo from 'ui/shared/TokenLogo';
 
 interface Props {
-  symbol: string;
+  symbol?: string | null;
   hash: string;
-  name: string;
+  name?: string | null;
   className?: string;
 }
 
@@ -20,7 +20,7 @@ const TokenSnippet = ({ symbol, hash, name, className }: Props) => {
       <Link href={ url } target="_blank">
         { name }
       </Link>
-      <Text variant="secondary">({ symbol })</Text>
+      { symbol && <Text variant="secondary">({ symbol })</Text> }
     </Center>
   );
 };

ui/shared/address/AddressLink.tsx

@@ -7,7 +7,7 @@ import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
 interface Props {
   type?: 'address' | 'transaction' | 'token' | 'block';
-  alias?: string;
+  alias?: string | null;
   className?: string;
   hash: string;
   truncation?: 'constant' | 'dynamic'| 'none';

ui/tx/NftTokenTransferSnippet.tsx

@@ -9,7 +9,8 @@ interface Props {
   value: string;
   tokenId: string;
   hash: string;
-  symbol: string;
+  name?: string | null;
+  symbol?: string | null;
 }
 
 const NftTokenTransferSnippet = (props: Props) => {
@@ -23,7 +24,7 @@ const NftTokenTransferSnippet = (props: Props) => {
         <Icon as={ nftIcon } boxSize={ 6 } mr={ 1 }/>
         <Link href={ url } fontWeight={ 600 }>{ props.tokenId }</Link>
       </Box>
-      <TokenSnippet symbol={ props.symbol } hash={ props.hash } name="Foo"/>
+      <TokenSnippet symbol={ props.symbol } hash={ props.hash } name={ props.name }/>
     </Flex>
   );
 };

ui/tx/TokenTransfer.tsx

 import { Flex, Icon, Text } from '@chakra-ui/react';
 import React from 'react';
 
-import type { TokenTransfer as TTokenTransfer } from 'types/api/tokenTransfer';
+import type { TokenTransfer as TTokenTransfer, Erc20TotalPayload, Erc721TotalPayload, Erc1155TotalPayload } from 'types/api/tokenTransfer';
 
 import rightArrowIcon from 'icons/arrows/east.svg';
 import { space } from 'lib/html-entities';
@@ -12,43 +12,47 @@ import NftTokenTransferSnippet from 'ui/tx/NftTokenTransferSnippet';
 
 type Props = TTokenTransfer;
 
-const TokenTransfer = (props: Props) => {
+const TokenTransfer = ({ token, total, to, from }: Props) => {
 
-  const isColumnLayout = props.token_type === 'ERC-1155' && Array.isArray(props.total);
-  const tokenSnippet = <TokenSnippet symbol={ props.token_symbol } hash={ props.token_address } name="Foo" ml={ 3 }/>;
+  const isColumnLayout = token.type === 'ERC-1155' && Array.isArray(total);
+  const tokenSnippet = <TokenSnippet symbol={ token.symbol } hash={ token.address } name={ token.name } ml={ 3 }/>;
 
   const content = (() => {
-    switch (props.token_type) {
-      case 'ERC-20':
+    switch (token.type) {
+      case 'ERC-20': {
+        const payload = total as Erc20TotalPayload;
         return (
           <Flex>
             <Text fontWeight={ 500 } as="span">For:{ space }
-              <CurrencyValue value={ props.total.value } unit="ether" exchangeRate={ props.exchange_rate } fontWeight={ 600 }/>
+              <CurrencyValue value={ payload.value } exchangeRate={ token.exchange_rate } fontWeight={ 600 }/>
             </Text>
             { tokenSnippet }
           </Flex>
         );
+      }
 
       case 'ERC-721': {
+        const payload = total as Erc721TotalPayload;
         return (
           <NftTokenTransferSnippet
-            tokenId={ props.total.token_id }
+            tokenId={ payload.token_id }
             value="1"
-            hash={ props.token_address }
-            symbol={ props.token_symbol }
+            hash={ token.address }
+            symbol={ token.symbol }
           />
         );
       }
 
       case 'ERC-1155': {
-        const items = Array.isArray(props.total) ? props.total : [ props.total ];
+        const payload = total as Erc1155TotalPayload | Array<Erc1155TotalPayload>;
+        const items = Array.isArray(payload) ? payload : [ payload ];
         return items.map((item) => (
           <NftTokenTransferSnippet
             key={ item.token_id }
             tokenId={ item.token_id }
             value={ item.value }
-            hash={ props.token_address }
-            symbol={ props.token_symbol }
+            hash={ token.address }
+            symbol={ token.symbol }
           />
         ));
       }
@@ -64,9 +68,9 @@ const TokenTransfer = (props: Props) => {
       flexDir={ isColumnLayout ? 'column' : 'row' }
     >
       <Flex alignItems="center">
-        <AddressLink fontWeight="500" hash={ props.from.hash } truncation="constant"/>
+        <AddressLink fontWeight="500" hash={ from.hash } truncation="constant"/>
         <Icon as={ rightArrowIcon } boxSize={ 6 } mx={ 2 } color="gray.500"/>
-        <AddressLink fontWeight="500" hash={ props.to.hash } truncation="constant"/>
+        <AddressLink fontWeight="500" hash={ to.hash } truncation="constant"/>
       </Flex>
       <Flex flexDir="column" rowGap={ 5 }>
         { content }

ui/tx/TokenTransferList.tsx

@@ -10,9 +10,9 @@ interface Props {
 }
 
 function getItemsNum(items: Array<TTokenTransfer>) {
-  const nonErc1155items = items.filter((item) => item.token_type !== 'ERC-1155').length;
+  const nonErc1155items = items.filter((item) => item.token.type !== 'ERC-1155').length;
   const erc1155items = items
-    .filter((item) => item.token_type === 'ERC-1155')
+    .filter((item) => item.token.type === 'ERC-1155')
     .map((item) => {
       if (Array.isArray(item.total)) {
         return item.total.length;