feat: update value field in tx lists

protofire · Jan 13, 2025 · 3df35d0 · 3df35d0
1 parent dce1a45
commit 3df35d0
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 58 deletions.
diff --git a/ui/stakingTxs/StakingTxsTable.tsx b/ui/stakingTxs/StakingTxsTable.tsx
@@ -6,6 +6,7 @@ import type { StakingTransaction } from 'types/api/stakingTransaction';
 
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
 import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
+import { currencyUnits } from 'lib/units';
 import TheadSticky from 'ui/shared/TheadSticky';
 
 import StakingTxsTableItem from './StakingTxsTableItem';
@@ -29,7 +30,7 @@ const StakingTxsTable = ({ txs, top, currentAddress, isLoading }: Props) => {
             <Th width="160px">Block</Th>
             <Th width="160px">Validator</Th>
             <Th width="160px">From</Th>
-            <Th width="160px">Value ONE</Th>
+            <Th width="160px">{ `Value ${ currencyUnits.ether }` }</Th>
           </Tr>
         </TheadSticky>
         <Tbody>

diff --git a/ui/txs/TxsTableItem.tsx b/ui/txs/TxsTableItem.tsx
@@ -30,24 +30,29 @@ type Props = {
   isLoading?: boolean;
 };
 
-const CopyIcon = ({
-  tx,
-  isLoading,
-}: {
-  tx: Transaction;
-  isLoading?: boolean;
-}) => {
+const CopyIcon = ({ tx, isLoading }: { tx: Transaction; isLoading?: boolean }) => {
   const handleClick = React.useCallback(() => {
     navigator.clipboard.writeText(
       `${ tx.hash },${ tx.block },${ tx.timestamp },${ tx.from.hash },${ toBech32(tx.from.hash) },${
         tx.to?.hash || tx.created_contract?.hash
-      },${
-        toBech32((tx.to?.hash || tx.created_contract?.hash) as string)
-      },${ tx.type },${ tx.value },${ tx.fee.value },${ tx.status },${
-        tx.revert_reason || 'N/A'
-      },${ tx.exchange_rate }`,
+      },${ toBech32((tx.to?.hash || tx.created_contract?.hash) as string) },${ tx.type },${ tx.value },${ tx.fee.value },${
+        tx.status
+      },${ tx.revert_reason || 'N/A' },${ tx.exchange_rate }`,
     );
-  }, [ tx.block, tx.created_contract, tx.exchange_rate, tx.fee, tx.from, tx.hash, tx.revert_reason, tx.status, tx.timestamp, tx.to, tx.type, tx.value ]);
+  }, [
+    tx.block,
+    tx.created_contract,
+    tx.exchange_rate,
+    tx.fee,
+    tx.from,
+    tx.hash,
+    tx.revert_reason,
+    tx.status,
+    tx.timestamp,
+    tx.to,
+    tx.type,
+    tx.value,
+  ]);
 
   if (isLoading) {
     return <Skeleton boxSize={ 6 } borderRadius="sm" flexShrink={ 0 }/>;
@@ -67,23 +72,12 @@ const CopyIcon = ({
       flexShrink={ 0 }
       aria-label="Transaction info"
     >
-      <IconSvg
-        name="copy"
-        boxSize={ 5 }
-        color="link"
-        _hover={{ color: 'link_hovered' }}
-      />
+      <IconSvg name="copy" boxSize={ 5 } color="link" _hover={{ color: 'link_hovered' }}/>
     </Button>
   );
 };
 
-const TxsTableItem = ({
-  tx,
-  showBlockInfo,
-  currentAddress,
-  enableTimeIncrement,
-  isLoading,
-}: Props) => {
+const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement, isLoading }: Props) => {
   const dataTo = tx.to ? tx.to : tx.created_contract;
   const timeAgo = useTimeAgoIncrement(tx.timestamp, enableTimeIncrement);
 
@@ -122,11 +116,7 @@ const TxsTableItem = ({
             truncation="constant_long"
           />
           { tx.timestamp && (
-            <Skeleton
-              color="text_secondary"
-              fontWeight="400"
-              isLoaded={ !isLoading }
-            >
+            <Skeleton color="text_secondary" fontWeight="400" isLoaded={ !isLoading }>
               <span>{ timeAgo }</span>
             </Skeleton>
           ) }
@@ -145,26 +135,15 @@ const TxsTableItem = ({
       </Td>
       <Td whiteSpace="nowrap">
         { method && (
-          <Tag
-            colorScheme={ method === 'Multicall' ? 'teal' : 'gray' }
-            isLoading={ isLoading }
-            isTruncated
-          >
+          <Tag colorScheme={ method === 'Multicall' ? 'teal' : 'gray' } isLoading={ isLoading } isTruncated>
             { method }
           </Tag>
         ) }
       </Td>
       { showBlockInfo && (
         <Td>
           { tx.block && (
-            <BlockEntity
-              isLoading={ isLoading }
-              number={ tx.block }
-              noIcon
-              fontSize="sm"
-              lineHeight={ 6 }
-              fontWeight={ 500 }
-            />
+            <BlockEntity isLoading={ isLoading } number={ tx.block } noIcon fontSize="sm" lineHeight={ 6 } fontWeight={ 500 }/>
           ) }
         </Td>
       ) }
@@ -180,26 +159,20 @@ const TxsTableItem = ({
       </Td>
       { !config.UI.views.tx.hiddenFields?.value && (
         <Td isNumeric>
-          <CurrencyValue value={ tx.value } accuracy={ 8 } isLoading={ isLoading }/>
+          { tx.claimed_reward ? (
+            <CurrencyValue value={ tx.claimed_reward } accuracy={ 8 } isLoading={ isLoading }/>
+          ) : (
+            <CurrencyValue value={ tx.value } accuracy={ 8 } isLoading={ isLoading }/>
+          ) }
         </Td>
       ) }
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
         <Td isNumeric>
           { /* eslint-disable-next-line no-nested-ternary */ }
           { tx.stability_fee ? (
-            <TxFeeStability
-              data={ tx.stability_fee }
-              isLoading={ isLoading }
-              accuracy={ 8 }
-              justifyContent="end"
-              hideUsd
-            />
+            <TxFeeStability data={ tx.stability_fee } isLoading={ isLoading } accuracy={ 8 } justifyContent="end" hideUsd/>
           ) : tx.fee.value ? (
-            <CurrencyValue
-              value={ tx.fee.value }
-              accuracy={ 8 }
-              isLoading={ isLoading }
-            />
+            <CurrencyValue value={ tx.fee.value } accuracy={ 8 } isLoading={ isLoading }/>
           ) : (
             '-'
           ) }