column for token id

types/api/txStateChanges.ts

@@ -38,7 +38,7 @@ export interface TxStateChangeTokenErc721 {
 export interface TxStateChangeTokenErc1155 {
   type: 'token';
   token: TokenInfo<'ERC-1155'>;
-  change: Array<NftTokenChange<Erc1155TotalPayload | Array<Erc1155TotalPayload>>>;
+  change: Array<NftTokenChange<Erc1155TotalPayload>>;
 }
 
 export type TxStateChanges = Array<TxStateChange>;

ui/shared/HashStringShorten.tsx

@@ -7,6 +7,10 @@ interface Props {
 }
 
 const HashStringShorten = ({ hash, isTooltipDisabled }: Props) => {
+  if (hash.length <= 8) {
+    return <span>{ hash }</span>;
+  }
+
   return (
     <Tooltip label={ hash } isDisabled={ isTooltipDisabled }>
       { hash.slice(0, 4) + '...' + hash.slice(-4) }

ui/shared/TokenTransfer/TokenTransferNft.tsx

@@ -3,6 +3,7 @@ import { route } from 'nextjs-routes';
 import React from 'react';
 
 import nftPlaceholder from 'icons/nft_shield.svg';
+import HashStringShorten from 'ui/shared/HashStringShorten';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkInternal from 'ui/shared/LinkInternal';
 
@@ -11,9 +12,10 @@ interface Props {
   id: string;
   className?: string;
   isDisabled?: boolean;
+  truncation?: 'dynamic' | 'constant';
 }
 
-const TokenTransferNft = ({ hash, id, className, isDisabled }: Props) => {
+const TokenTransferNft = ({ hash, id, className, isDisabled, truncation = 'dynamic' }: Props) => {
   const Component = isDisabled ? Box : LinkInternal;
 
   return (
@@ -28,7 +30,7 @@ const TokenTransferNft = ({ hash, id, className, isDisabled }: Props) => {
     >
       <Icon as={ nftPlaceholder } boxSize="30px" mr={ 1 } color="inherit"/>
       <Box maxW="calc(100% - 34px)">
-        <HashStringShortenDynamic hash={ id } fontWeight={ 500 }/>
+        { truncation === 'constant' ? <HashStringShorten hash={ id }/> : <HashStringShortenDynamic hash={ id } fontWeight={ 500 }/> }
       </Box>
     </Component>
   );

ui/tx/state/TxStateListItem.tsx

@@ -16,7 +16,7 @@ interface Props {
 
 const TxStateListItem = ({ data }: Props) => {
 
-  const { before, after, change, hint } = getStateElements(data);
+  const { before, after, change, hint, tokenId } = getStateElements(data);
 
   return (
     <ListItemMobile>
@@ -40,6 +40,12 @@ const TxStateListItem = ({ data }: Props) => {
         ) }
         <GridItem fontWeight={ 500 }>Change</GridItem>
         <GridItem>{ change }</GridItem>
+        { tokenId && (
+          <>
+            <GridItem fontWeight={ 500 }>Token ID</GridItem>
+            <GridItem>{ tokenId }</GridItem>
+          </>
+        ) }
       </Grid>
     </ListItemMobile>
   );

ui/tx/state/TxStateTable.tsx

@@ -25,6 +25,7 @@ const TxStateTable = ({ data }: Props) => {
           <Th width="33%" isNumeric>Before</Th>
           <Th width="33%" isNumeric>After</Th>
           <Th width="33%" isNumeric>Change</Th>
+          <Th width="150px" minW="80px" maxW="150px">Token ID</Th>
         </Tr>
       </Thead>
       <Tbody>

ui/tx/state/TxStateTableItem.tsx

@@ -14,7 +14,7 @@ interface Props {
 }
 
 const TxStateTableItem = ({ data }: Props) => {
-  const { before, after, change, hint } = getStateElements(data);
+  const { before, after, change, hint, tokenId } = getStateElements(data);
 
   return (
     <Tr>
@@ -30,6 +30,7 @@ const TxStateTableItem = ({ data }: Props) => {
       <Td isNumeric lineHeight="30px">{ before }</Td>
       <Td isNumeric lineHeight="30px">{ after }</Td>
       <Td isNumeric lineHeight="30px"> { change } </Td>
+      <Td lineHeight="30px">{ tokenId || '-' }</Td>
     </Tr>
   );
 };

ui/tx/state/utils.tsx

-import { Box, Flex, Stat, StatArrow, StatHelpText } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -25,12 +25,16 @@ export function getStateElements(data: TxStateChange) {
     }
 
     if (data.address.hash === ZERO_ADDRESS) {
-      return (
-        <Flex align="center" columnGap={ 1 }>
-          <Hint label="Address used in tokens mintings and burnings"/>
-          <Box color="text_secondary" whiteSpace="nowrap">Burn address</Box>
-        </Flex>
-      );
+      const changeDirection = Array.isArray(data.change) ? data.change[0].direction : null;
+      if (changeDirection) {
+        const text = changeDirection === 'from' ? 'Mint' : 'Burn';
+        return (
+          <Flex align="center" columnGap={ 1 }>
+            <Hint label="Address used in tokens mintings and burnings"/>
+            <Box color="text_secondary" whiteSpace="nowrap">{ text } address</Box>
+          </Flex>
+        );
+      }
     }
 
     return null;
@@ -41,85 +45,63 @@ export function getStateElements(data: TxStateChange) {
       const beforeBn = BigNumber(data.balance_before || '0').div(10 ** appConfig.network.currency.decimals);
       const afterBn = BigNumber(data.balance_after || '0').div(10 ** appConfig.network.currency.decimals);
       const differenceBn = afterBn.minus(beforeBn);
+      const changeColor = beforeBn.lte(afterBn) ? 'green.500' : 'red.500';
+      const changeSign = beforeBn.lte(afterBn) ? '+' : '-';
 
       return {
         before: <Box>{ beforeBn.toFormat() } { appConfig.network.currency.symbol }</Box>,
         after: <Box>{ afterBn.toFormat() } { appConfig.network.currency.symbol }</Box>,
-        change: (
-          <Stat>
-            { differenceBn.toFormat() }
-            <StatArrow ml={ 2 } type={ beforeBn.lte(afterBn) ? 'increase' : 'decrease' }/>
-          </Stat>
-        ),
+        change: <Box color={ changeColor }>{ changeSign }{ nbsp }{ differenceBn.abs().toFormat() }</Box>,
         hint,
       };
     }
     case 'token': {
       const tokenLink = <AddressLink type="token" hash={ data.token.address } alias={ trimTokenSymbol(data.token?.symbol || data.token.address) }/>;
+      const before = Number(data.balance_before);
+      const after = Number(data.balance_after);
+      const difference = after - before;
+      const changeColor = difference >= 0 ? 'green.500' : 'red.500';
+      const changeSign = difference >= 0 ? '+' : '-';
+      const tokenIdValue = Array.isArray(data.change) ? data.change[0].total.token_id : null;
 
       const change = (() => {
-        const difference = Number(data.balance_after) - Number(data.balance_before);
+        if (!before && !after && data.address.hash === ZERO_ADDRESS) {
+          const changeDirection = Array.isArray(data.change) ? data.change[0].direction : null;
 
-        switch (data.token.type) {
-          case 'ERC-20': {
+          if (changeDirection) {
             return (
-              <Stat>
-                <StatHelpText display="flex" justifyContent={{ base: 'flex-start', lg: 'flex-end' }} alignItems="center" flexWrap="nowrap">
-                  { difference }{ nbsp }
-                  { tokenLink }
-                  <StatArrow ml={ 2 } type={ difference > 0 ? 'increase' : 'decrease' }/>
-                </StatHelpText>
-              </Stat>
+              <Box color={ changeDirection === 'from' ? 'green.500' : 'red.500' }>
+                { changeDirection === 'from' ? 'Mint' : 'Burn' }
+              </Box>
             );
           }
-          case 'ERC-721':
-          case 'ERC-1155': {
-            if (typeof data.change === 'string') {
-              return null;
-            }
-
-            return data.change.map((item, index) => {
-              if (Array.isArray(item.total)) {
-                return item.total.map((element, index) => {
-                  return (
-                    <Stat key={ index }>
-                      <StatHelpText display="flex" justifyContent={{ base: 'flex-start', lg: 'flex-end' }} alignItems="center" flexWrap="nowrap">
-                        <TokenTransferNft hash={ data.token.address } id={ element.token_id } w="auto"/>
-                        <StatArrow ml={ 2 } type={ item.direction === 'to' ? 'increase' : 'decrease' }/>
-                      </StatHelpText>
-                    </Stat>
-                  );
-                });
-              }
+        }
 
-              return (
-                <Stat key={ index }>
-                  <StatHelpText display="flex" justifyContent={{ base: 'flex-start', lg: 'flex-end' }} alignItems="center" flexWrap="nowrap">
-                    <TokenTransferNft hash={ data.token.address } id={ item.total.token_id } w="auto"/>
-                    <StatArrow ml={ 2 } type={ item.direction === 'to' ? 'increase' : 'decrease' }/>
-                  </StatHelpText>
-                </Stat>
-              );
-            });
-          }
+        if (!difference) {
+          return <Box>0</Box>;
         }
+
+        return <Box color={ changeColor }>{ changeSign }{ nbsp }{ Math.abs(difference).toLocaleString() }</Box>;
       })();
 
       return {
         before: data.balance_before ? (
           <Flex whiteSpace="pre-wrap" justifyContent={{ base: 'flex-start', lg: 'flex-end' }}>
-            <span>{ Number(data.balance_before).toLocaleString() } </span>
+            <span>{ before.toLocaleString() } </span>
             { tokenLink }
           </Flex>
         ) : null,
         after: data.balance_after ? (
           <Flex whiteSpace="pre-wrap" justifyContent={{ base: 'flex-start', lg: 'flex-end' }}>
-            <span>{ Number(data.balance_after).toLocaleString() } </span>
+            <span>{ after.toLocaleString() } </span>
             { tokenLink }
           </Flex>
         ) : null,
         change,
         hint,
+        tokenId: tokenIdValue ?
+          <TokenTransferNft hash={ data.token.address } id={ tokenIdValue } w="auto" truncation="constant" my={{ base: '-3px', lg: 0 }}/> :
+          null,
       };
     }
   }