feat: add ONE value to staking transactions list

protofire · Jan 8, 2025 · d56eb11 · d56eb11
1 parent 408d151
commit d56eb11
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 58 deletions.
diff --git a/ui/pages/Address.tsx b/ui/pages/Address.tsx
@@ -75,7 +75,9 @@ const AddressPageContent = () => {
     },
   });
 
-  const isSafeAddress = useIsSafeAddress(!addressQuery.isPlaceholderData && addressQuery.data?.is_contract ? hash : undefined);
+  const isSafeAddress = useIsSafeAddress(
+    !addressQuery.isPlaceholderData && addressQuery.data?.is_contract ? hash : undefined,
+  );
   const safeIconColor = useColorModeValue('black', 'white');
 
   const contractTabs = useContractTabs(addressQuery.data);
@@ -150,44 +152,52 @@ const AddressPageContent = () => {
           component: <AddressLogs scrollRef={ tabsScrollRef }/>,
         } :
         undefined,
-      addressQuery.data?.is_contract ? {
-        id: 'contract',
-        title: () => {
-          if (addressQuery.data.is_verified) {
-            return (
-              <>
-                <span>Contract</span>
-                <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 }/>
-              </>
-            );
-          }
+      addressQuery.data?.is_contract ?
+        {
+          id: 'contract',
+          title: () => {
+            if (addressQuery.data.is_verified) {
+              return (
+                <>
+                  <span>Contract</span>
+                  <IconSvg name="status/success" boxSize="14px" color="green.500" ml={ 1 }/>
+                </>
+              );
+            }
 
-          return 'Contract';
-        },
-        component: <AddressContract tabs={ contractTabs }/>,
-        subTabs: contractTabs.map(tab => tab.id),
-      } : undefined,
+            return 'Contract';
+          },
+          component: <AddressContract tabs={ contractTabs }/>,
+          subTabs: contractTabs.map((tab) => tab.id),
+        } :
+        undefined,
     ].filter(Boolean);
   }, [ addressQuery.data, contractTabs, addressTabsCountersQuery.data, userOpsAccountQuery.data ]);
 
-  const isLoading = addressQuery.isPlaceholderData || (config.features.userOps.isEnabled && userOpsAccountQuery.isPlaceholderData);
+  const isLoading =
+    addressQuery.isPlaceholderData || (config.features.userOps.isEnabled && userOpsAccountQuery.isPlaceholderData);
 
   const tags = (
     <EntityTags
       data={ addressQuery.data }
       isLoading={ isLoading }
       tagsBefore={ [
-        !addressQuery.data?.is_contract ? { label: 'eoa', display_name: 'EOA' } : undefined,
-        config.features.validators.isEnabled && addressQuery.data?.has_validated_blocks ? { label: 'validator', display_name: 'Validator' } : undefined,
+        !addressQuery.data?.is_contract ? { label: 'eoa', display_name: 'EOAAA' } : undefined,
+        config.features.validators.isEnabled && addressQuery.data?.has_validated_blocks ?
+          { label: 'validator', display_name: 'Validator' } :
+          undefined,
         addressQuery.data?.implementation_address ? { label: 'proxy', display_name: 'Proxy' } : undefined,
         addressQuery.data?.token ? { label: 'token', display_name: 'Token' } : undefined,
         isSafeAddress ? { label: 'safe', display_name: 'Multisig: Safe' } : undefined,
-        config.features.userOps.isEnabled && userOpsAccountQuery.data ? { label: 'user_ops_acc', display_name: 'Smart contract wallet' } : undefined,
+        config.features.userOps.isEnabled && userOpsAccountQuery.data ?
+          { label: 'user_ops_acc', display_name: 'Smart contract wallet' } :
+          undefined,
       ] }
     />
   );
 
-  const content = (addressQuery.isError || addressQuery.isDegradedData) ? null : <RoutedTabs tabs={ tabs } tabListProps={{ mt: 8 }}/>;
+  const content =
+    addressQuery.isError || addressQuery.isDegradedData ? null : <RoutedTabs tabs={ tabs } tabListProps={{ mt: 8 }}/>;
 
   const backLink = React.useMemo(() => {
     const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/accounts');
@@ -225,17 +235,21 @@ const AddressPageContent = () => {
         iconColor={ isSafeAddress ? safeIconColor : undefined }
         mr={ 4 }
       />
-      { !isLoading && addressQuery.data?.is_contract && addressQuery.data.token &&
-        <AddressAddToWallet token={ addressQuery.data.token } variant="button"/> }
+      { !isLoading && addressQuery.data?.is_contract && addressQuery.data.token && (
+        <AddressAddToWallet token={ addressQuery.data.token } variant="button"/>
+      ) }
       { !isLoading && !addressQuery.data?.is_contract && config.features.account.isEnabled && (
         <AddressFavoriteButton hash={ hash } watchListId={ addressQuery.data?.watchlist_address_id }/>
       ) }
       <AddressQrCode address={{ hash }} isLoading={ isLoading }/>
       <AccountActionsMenu isLoading={ isLoading }/>
       <HStack ml="auto" gap={ 2 }/>
-      { addressQuery.data?.is_contract && addressQuery.data?.is_verified && config.UI.views.address.solidityscanEnabled && <SolidityscanReport hash={ hash }/> }
-      { !isLoading && addressQuery.data && config.features.nameService.isEnabled &&
-        <AddressEnsDomains addressHash={ hash } mainDomainName={ addressQuery.data.ens_domain_name }/> }
+      { addressQuery.data?.is_contract &&
+        addressQuery.data?.is_verified &&
+        config.UI.views.address.solidityscanEnabled && <SolidityscanReport hash={ hash }/> }
+      { !isLoading && addressQuery.data && config.features.nameService.isEnabled && (
+        <AddressEnsDomains addressHash={ hash } mainDomainName={ addressQuery.data.ens_domain_name }/>
+      ) }
       <NetworkExplorers type="address" pathParam={ hash }/>
     </Flex>
   );
@@ -253,24 +267,16 @@ const AddressPageContent = () => {
 
       { config.features.metasuites.isEnabled && <Box display="none" id="meta-suites__address" data-ready={ !isLoading }/> }
       { !isLoading && !addressQuery.data?.is_contract && config.chain.stakingOverviewUrl && (
-        <Box
-          mb={ 4 }
-        >
-          <EntityBase.Link
-            isExternal
-            href={ config.chain.stakingOverviewUrl?.replace('{address}', toOne(hash)) }
-          >
+        <Box mb={ 4 }>
+          <EntityBase.Link isExternal href={ config.chain.stakingOverviewUrl?.replace('{address}', toOne(hash)) }>
             Staking Overview
           </EntityBase.Link>
         </Box>
       ) }
       <AddressDetails key={ shardId } addressQuery={ addressQuery } scrollRef={ tabsScrollRef }/>
       { /* should stay before tabs to scroll up with pagination */ }
       <Box ref={ tabsScrollRef }></Box>
-      { (isLoading || addressTabsCountersQuery.isPlaceholderData) ?
-        <TabsSkeleton tabs={ tabs }/> :
-        content
-      }
+      { isLoading || addressTabsCountersQuery.isPlaceholderData ? <TabsSkeleton tabs={ tabs }/> : content }
     </>
   );
 };

diff --git a/ui/stakingTxs/StakingTxsTable.tsx b/ui/stakingTxs/StakingTxsTable.tsx
@@ -15,14 +15,9 @@ type Props = {
   top: number;
   currentAddress?: string;
   isLoading?: boolean;
-}
+};
 
-const StakingTxsTable = ({
-  txs,
-  top,
-  currentAddress,
-  isLoading,
-}: Props) => {
+const StakingTxsTable = ({ txs, top, currentAddress, isLoading }: Props) => {
   const { cutRef, renderedItemsNum } = useLazyRenderedList(txs, !isLoading);
   return (
     <AddressHighlightProvider>
@@ -34,6 +29,7 @@ const StakingTxsTable = ({
             <Th width="160px">Block</Th>
             <Th width="160px">Validator</Th>
             <Th width="160px">From</Th>
+            <Th width="160px">Value ONE</Th>
           </Tr>
         </TheadSticky>
         <Tbody>

diff --git a/ui/stakingTxs/StakingTxsTableItem.tsx b/ui/stakingTxs/StakingTxsTableItem.tsx
@@ -6,6 +6,7 @@ import type { StakingTransaction } from 'types/api/stakingTransaction';
 
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
+import CurrencyValue from 'ui/shared/CurrencyValue';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import StakingTxEntity from 'ui/shared/entities/stakingTx/StakingTxEntity';
@@ -40,11 +41,7 @@ const StakingTxsTableItem = ({ tx, currentAddress, isLoading }: Props) => {
             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>
           ) }
@@ -54,14 +51,7 @@ const StakingTxsTableItem = ({ tx, currentAddress, isLoading }: Props) => {
         <StakingTxType isLoading={ isLoading } data={ tx.type }/>
       </Td>
       <Td>
-        <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>
       <Td>
         { tx.msg_validator_address ? (
@@ -86,6 +76,15 @@ const StakingTxsTableItem = ({ tx, currentAddress, isLoading }: Props) => {
           mode="compact"
         />
       </Td>
+      <Td>
+        <CurrencyValue
+          value={ tx.type !== 'collect_rewards' ? tx.msg_amount : tx.claimed_reward }
+          accuracyUsd={ 2 }
+          accuracy={ 8 }
+          isLoading={ isLoading }
+          flexWrap="wrap"
+        />
+      </Td>
     </Tr>
   );
 };