fix state changes

mocks/txs/state.ts

@@ -143,6 +143,37 @@ export const sendCoin: TxStateChange = {
   type: 'coin',
 };
 
+export const sendERC20Token = {
+  address: {
+    hash: '0x7f6479df95Aa3036a3BE02DB6300ea201ABd9981',
+    implementation_name: null,
+    is_contract: false,
+    is_verified: false,
+    name: null,
+    private_tags: [],
+    public_tags: [],
+    watchlist_names: [],
+  },
+  balance_after: '6814903154',
+  balance_before: '9814903154',
+  change: '-3000000000',
+  is_miner: false,
+  token: {
+    address: '0xdAC17F958D2ee523a2206206994597C13D831ec7',
+    circulating_market_cap: '82978861367.28714',
+    decimals: '6',
+    exchange_rate: '0.992839',
+    holders: null,
+    icon_url: 'https://gateway.tkn.xyz/ipfs/bafybeihrrubjya5nnwgqdm6mfqisxfnv76tl3yd452lkmgomn5n64gzbxu/',
+    name: 'Tether USD',
+    symbol: 'USDT',
+    total_supply: '39030615894320966',
+    type: 'ERC-20',
+    token_id: null,
+  },
+  type: 'token',
+};
+
 export const baseResponse = {
   items: [
     mintToken,
@@ -150,6 +181,7 @@ export const baseResponse = {
     sendCoin,
     receiveCoin,
     transfer1155Token,
+    sendERC20Token,
   ],
   next_page_params: {
     items_count: 50,

ui/tx/state/utils.tsx

@@ -77,21 +77,26 @@ export function getStateElements(data: TxStateChange, isLoading?: boolean) {
           isLoading={ isLoading }
         />
       );
-      const before = Number(data.balance_before);
-      const after = Number(data.balance_after);
+      const beforeBn = BigNumber(data.balance_before || '0').div(BigNumber(10 ** (Number(data.token.decimals))));
+      const afterBn = BigNumber(data.balance_after || '0').div(BigNumber(10 ** (Number(data.token.decimals))));
       const change = (() => {
-        const difference = typeof data.change === 'string' ? Number(data.change) : after - before;
+        let differenceBn;
+        if (typeof data.change === 'string') {
+          differenceBn = BigNumber(data.change || '0').div(BigNumber(10 ** (Number(data.token.decimals))));
+        } else {
+          differenceBn = afterBn.minus(beforeBn);
+        }
 
-        if (!difference) {
+        if (!differenceBn || differenceBn.isEqualTo(0)) {
           return null;
         }
 
-        const changeColor = difference >= 0 ? 'green.500' : 'red.500';
-        const changeSign = difference >= 0 ? '+' : '-';
+        const changeColor = differenceBn.isGreaterThanOrEqualTo(0) ? 'green.500' : 'red.500';
+        const changeSign = differenceBn.isGreaterThanOrEqualTo(0) ? '+' : '-';
 
         return (
           <Skeleton isLoaded={ !isLoading } display="inline-block" color={ changeColor }>
-            <span>{ changeSign }{ nbsp }{ Math.abs(difference).toLocaleString() }</span>
+            <span>{ changeSign }{ nbsp }{ differenceBn.abs().toFormat() }</span>
           </Skeleton>
         );
       })();
@@ -119,14 +124,14 @@ export function getStateElements(data: TxStateChange, isLoading?: boolean) {
       return {
         before: data.balance_before ? (
           <Flex whiteSpace="pre-wrap" justifyContent={{ base: 'flex-start', lg: 'flex-end' }}>
-            <Skeleton isLoaded={ !isLoading }>{ before.toLocaleString() }</Skeleton>
+            <Skeleton isLoaded={ !isLoading }>{ beforeBn.toFormat() }</Skeleton>
             <span>{ space }</span>
             { tokenLink }
           </Flex>
         ) : null,
         after: data.balance_after ? (
           <Flex whiteSpace="pre-wrap" justifyContent={{ base: 'flex-start', lg: 'flex-end' }}>
-            <Skeleton isLoaded={ !isLoading }>{ after.toLocaleString() }</Skeleton>
+            <Skeleton isLoaded={ !isLoading }>{ afterBn.toFormat() }</Skeleton>
             <span>{ space }</span>
             { tokenLink }
           </Flex>