Transaction views customization (#1275)

* Stability UI customizations V0

Fixes #1269

* oops

* [skip ci] clean up

configs/app/ui/views/address.ts

-import type { IdenticonType } from 'types/views/address';
-import { IDENTICON_TYPES } from 'types/views/address';
+import type { AddressViewId, IdenticonType } from 'types/views/address';
+import { ADDRESS_VIEWS_IDS, IDENTICON_TYPES } from 'types/views/address';
 
-import { getEnvValue } from 'configs/app/utils';
+import { getEnvValue, parseEnvJson } from 'configs/app/utils';
 
 const identiconType: IdenticonType = (() => {
   const value = getEnvValue('NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE');
@@ -9,8 +9,24 @@ const identiconType: IdenticonType = (() => {
   return IDENTICON_TYPES.find((type) => value === type) || 'jazzicon';
 })();
 
+const hiddenViews = (() => {
+  const parsedValue = parseEnvJson<Array<AddressViewId>>(getEnvValue('NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS')) || [];
+
+  if (!Array.isArray(parsedValue)) {
+    return undefined;
+  }
+
+  const result = ADDRESS_VIEWS_IDS.reduce((result, item) => {
+    result[item] = parsedValue.includes(item);
+    return result;
+  }, {} as Record<AddressViewId, boolean>);
+
+  return result;
+})();
+
 const config = Object.freeze({
-  identiconType: identiconType,
+  identiconType,
+  hiddenViews,
 });
 
 export default config;

configs/app/ui/views/index.ts

-export { default as block } from './block';
 export { default as address } from './address';
+export { default as block } from './block';
+export { default as tx } from './tx';

configs/app/ui/views/tx.ts

+import type { TxAdditionalFieldsId, TxFieldsId } from 'types/views/tx';
+import { TX_ADDITIONAL_FIELDS_IDS, TX_FIELDS_IDS } from 'types/views/tx';
+
+import { getEnvValue, parseEnvJson } from 'configs/app/utils';
+
+const hiddenFields = (() => {
+  const parsedValue = parseEnvJson<Array<TxFieldsId>>(getEnvValue('NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS')) || [];
+
+  if (!Array.isArray(parsedValue)) {
+    return undefined;
+  }
+
+  const result = TX_FIELDS_IDS.reduce((result, item) => {
+    result[item] = parsedValue.includes(item);
+    return result;
+  }, {} as Record<TxFieldsId, boolean>);
+
+  return result;
+})();
+
+const additionalFields = (() => {
+  const parsedValue = parseEnvJson<Array<TxAdditionalFieldsId>>(getEnvValue('NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS')) || [];
+
+  if (!Array.isArray(parsedValue)) {
+    return undefined;
+  }
+
+  const result = TX_ADDITIONAL_FIELDS_IDS.reduce((result, item) => {
+    result[item] = parsedValue.includes(item);
+    return result;
+  }, {} as Record<TxAdditionalFieldsId, boolean>);
+
+  return result;
+})();
+
+const config = Object.freeze({
+  hiddenFields,
+  additionalFields,
+});
+
+export default config;

configs/envs/.env.main

@@ -32,6 +32,10 @@ NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-c
 ## footer
 ## misc
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Bitquery','baseUrl':'https://explorer.bitquery.io/','paths':{'tx':'/goerli/tx','address':'/goerli/address','token':'/goerli/token','block':'/goerli/block'}},{'title':'Etherscan','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
+## views
+# NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS=['top_accounts']
+# NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS=['value','fee_currency','gas_price','tx_fee','gas_fees','burnt_fees']
+# NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS=['fee_per_gas']
 
 # app features
 NEXT_PUBLIC_APP_ENV=development

deploy/tools/envs-validator/schema.ts

@@ -19,9 +19,12 @@ import { SUPPORTED_WALLETS } from '../../../types/client/wallets';
 import type { CustomLink, CustomLinksGroup } from '../../../types/footerLinks';
 import type { ChainIndicatorId } from '../../../types/homepage';
 import { type NetworkVerificationType, type NetworkExplorer, type FeaturedNetwork, NETWORK_GROUPS } from '../../../types/networks';
-import { IDENTICON_TYPES } from '../../../types/views/address';
+import type { AddressViewId } from '../../../types/views/address';
+import { ADDRESS_VIEWS_IDS, IDENTICON_TYPES } from '../../../types/views/address';
 import { BLOCK_FIELDS_IDS } from '../../../types/views/block';
 import type { BlockFieldId } from '../../../types/views/block';
+import type { TxAdditionalFieldsId, TxFieldsId } from '../../../types/views/tx';
+import { TX_ADDITIONAL_FIELDS_IDS, TX_FIELDS_IDS } from '../../../types/views/tx';
 
 import { replaceQuotes } from '../../../configs/app/utils';
 import * as regexp from '../../../lib/regexp';
@@ -360,6 +363,21 @@ const schema = yup
       .json()
       .of(yup.string<BlockFieldId>().oneOf(BLOCK_FIELDS_IDS)),
     NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE: yup.string().oneOf(IDENTICON_TYPES),
+    NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS: yup
+      .array()
+      .transform(replaceQuotes)
+      .json()
+      .of(yup.string<AddressViewId>().oneOf(ADDRESS_VIEWS_IDS)),
+    NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS: yup
+      .array()
+      .transform(replaceQuotes)
+      .json()
+      .of(yup.string<TxFieldsId>().oneOf(TX_FIELDS_IDS)),
+    NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS: yup
+      .array()
+      .transform(replaceQuotes)
+      .json()
+      .of(yup.string<TxAdditionalFieldsId>().oneOf(TX_ADDITIONAL_FIELDS_IDS)),
 
     //     e. misc
     NEXT_PUBLIC_NETWORK_EXPLORERS: yup

deploy/values/review/values.yaml.gotmpl

@@ -135,5 +135,11 @@ frontend:
       _default: "['token_pocket','coinbase','metamask']"
     NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE:
       _default: gradient_avatar
+    NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS:
+      _default: "['top_accounts']"
+    NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS:
+      _default: "['value','fee_currency','gas_price','gas_fees','burnt_fees']"
+    NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS:
+      _default: "['fee_per_gas']"
     NEXT_PUBLIC_USE_NEXT_JS_PROXY:
       _default: true
\ No newline at end of file

docs/ENVS.md

@@ -16,6 +16,8 @@ The app instance could be customized by passing following variables to NodeJS en
   - [Meta](ENVS.md#meta)
   - [Views](ENVS.md#views)
     - [Block](ENVS.md#block-views)
+    - [Address](ENVS.md#address-views)
+    - [Transaction](ENVS.md#transaction-views)
   - [Misc](ENVS.md#misc)
 - [App features](ENVS.md#app-features)
   - [My account](ENVS.md#my-account)
@@ -184,6 +186,36 @@ Settings for meta tags and OG tags
 | Variable | Type | Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_VIEWS_ADDRESS_IDENTICON_TYPE | `"github" \| "jazzicon" \| "gradient_avatar" \| "blockie"` | Style of address identicon appearance. Choose between [GitHub](https://github.blog/2013-08-14-identicons/), [Metamask Jazzicon](https://metamask.github.io/jazzicon/), [Gradient Avatar](https://github.com/varld/gradient-avatar) and [Ethereum Blocky](https://mycryptohq.github.io/ethereum-blockies-base64/) | - | `jazzicon` | `gradient_avatar` |
+| NEXT_PUBLIC_VIEWS_ADDRESS_HIDDEN_VIEWS | `Array<AddressViewId>` | Address views that should not be displayed. See below the list of the possible id values.  | - | - | `'["top_accounts"]'` |
+
+##### Address views list
+| Id | Description |
+| --- | --- |
+| `top_accounts` | Top accounts |
+
+&nbsp;
+
+#### Transaction views
+
+| Variable | Type | Description | Compulsoriness  | Default value | Example value |
+| --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_VIEWS_TX_HIDDEN_FIELDS | `Array<TxFieldsId>` | Array of the transaction fields ids that should be hidden. See below the list of the possible id values. | - | - | `'["value","tx_fee"]'` |
+| NEXT_PUBLIC_VIEWS_TX_ADDITIONAL_FIELDS | `Array<TxAdditionalFieldsId>` | Array of the additional fields ids that should be added to the transaction details. See below the list of the possible id values. | - | - | `'["fee_per_gas"]'` |
+
+##### Transaction fields list
+| Id | Description |
+| --- | --- |
+| `value` | Sent value |
+| `fee_currency` | Fee currency |
+| `gas_price` | Price per unit of gas |
+| `tx_fee` | Total transaction fee |
+| `gas_fees` | Gas fees breakdown |
+| `burnt_fees` | Amount of native coin burnt for transaction |
+
+##### Transaction additional fields list
+| Id | Description |
+| --- | --- |
+| `fee_per_gas` | Amount of total fee divided by total amount of gas used by transaction |
 
 &nbsp;
 

lib/hooks/useNavItems.tsx

@@ -49,12 +49,12 @@ export default function useNavItems(): ReturnType {
   return React.useMemo(() => {
     let blockchainNavItems: Array<NavItem> | Array<Array<NavItem>> = [];
 
-    const topAccounts = {
+    const topAccounts = !config.UI.views.address.hiddenViews?.top_accounts ? {
       text: 'Top accounts',
       nextRoute: { pathname: '/accounts' as const },
       icon: topAccountsIcon,
       isActive: pathname === '/accounts',
-    };
+    } : null;
     const blocks = {
       text: 'Blocks',
       nextRoute: { pathname: '/blocks' as const },
@@ -90,7 +90,7 @@ export default function useNavItems(): ReturnType {
         [
           topAccounts,
           verifiedContracts,
-        ],
+        ].filter(Boolean),
       ];
     } else {
       blockchainNavItems = [

nextjs/getServerSideProps.ts

@@ -113,3 +113,13 @@ export const suave: GetServerSideProps<Props> = async(context) => {
 
   return base(context);
 };
+
+export const accounts: GetServerSideProps<Props> = async(context) => {
+  if (config.UI.views.address.hiddenViews?.top_accounts) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};

pages/accounts.tsx

@@ -16,4 +16,4 @@ const Page: NextPage = () => {
 
 export default Page;
 
-export { base as getServerSideProps } from 'nextjs/getServerSideProps';
+export { accounts as getServerSideProps } from 'nextjs/getServerSideProps';

types/views/address.ts

@@ -8,3 +8,9 @@ export const IDENTICON_TYPES = [
 ] as const;
 
 export type IdenticonType = ArrayElement<typeof IDENTICON_TYPES>;
+
+export const ADDRESS_VIEWS_IDS = [
+  'top_accounts',
+] as const;
+
+export type AddressViewId = ArrayElement<typeof ADDRESS_VIEWS_IDS>;

types/views/tx.ts

+import type { ArrayElement } from 'types/utils';
+
+export const TX_FIELDS_IDS = [
+  'value',
+  'fee_currency',
+  'gas_price',
+  'tx_fee',
+  'gas_fees',
+  'burnt_fees',
+] as const;
+
+export type TxFieldsId = ArrayElement<typeof TX_FIELDS_IDS>;
+
+export const TX_ADDITIONAL_FIELDS_IDS = [
+  'fee_per_gas',
+] as const;
+
+export type TxAdditionalFieldsId = ArrayElement<typeof TX_ADDITIONAL_FIELDS_IDS>;

ui/home/LatestTxsItem.tsx

@@ -29,6 +29,7 @@ type Props = {
 const LatestTxsItem = ({ tx, isLoading }: Props) => {
   const dataTo = tx.to ? tx.to : tx.created_contract;
   const timeAgo = useTimeAgoIncrement(tx.timestamp || '0', true);
+  const columnNum = config.UI.views.tx.hiddenFields?.value && config.UI.views.tx.hiddenFields?.tx_fee ? 2 : 3;
 
   return (
     <Box
@@ -40,7 +41,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
       _last={{ borderBottom: '1px solid', borderColor: 'divider' }}
       display={{ base: 'none', lg: 'block' }}
     >
-      <Grid width="100%" gridTemplateColumns="3fr 2fr 150px" gridGap={ 8 }>
+      <Grid width="100%" gridTemplateColumns={ columnNum === 2 ? '3fr 2fr' : '3fr 2fr 150px' } gridGap={ 8 }>
         <Flex overflow="hidden" w="100%">
           <TxAdditionalInfo tx={ tx } isLoading={ isLoading }/>
           <Box ml={ 3 } w="calc(100% - 40px)">
@@ -99,14 +100,18 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
           </Box>
         </Grid>
         <Box>
-          <Skeleton isLoaded={ !isLoading } mb={ 2 }>
-            <Text as="span" whiteSpace="pre">{ config.chain.currency.symbol } </Text>
-            <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() }</Text>
-          </Skeleton>
-          <Skeleton isLoaded={ !isLoading }>
-            <Text as="span">Fee </Text>
-            <Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).dp(5).toFormat() }</Text>
-          </Skeleton>
+          { !config.UI.views.tx.hiddenFields?.value && (
+            <Skeleton isLoaded={ !isLoading } mb={ 2 }>
+              <Text as="span" whiteSpace="pre">{ config.chain.currency.symbol } </Text>
+              <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() }</Text>
+            </Skeleton>
+          ) }
+          { !config.UI.views.tx.hiddenFields?.tx_fee && (
+            <Skeleton isLoaded={ !isLoading }>
+              <Text as="span">Fee </Text>
+              <Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).dp(5).toFormat() }</Text>
+            </Skeleton>
+          ) }
         </Box>
       </Grid>
     </Box>

ui/home/LatestTxsItemMobile.tsx

@@ -89,14 +89,18 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
           />
         ) }
       </Flex>
-      <Skeleton isLoaded={ !isLoading } mb={ 2 } fontSize="sm" w="fit-content">
-        <Text as="span">Value { config.chain.currency.symbol } </Text>
-        <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() }</Text>
-      </Skeleton>
-      <Skeleton isLoaded={ !isLoading } fontSize="sm" w="fit-content">
-        <Text as="span">Fee { config.chain.currency.symbol } </Text>
-        <Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).dp(5).toFormat() }</Text>
-      </Skeleton>
+      { !config.UI.views.tx.hiddenFields?.value && (
+        <Skeleton isLoaded={ !isLoading } mb={ 2 } fontSize="sm" w="fit-content">
+          <Text as="span">Value { config.chain.currency.symbol } </Text>
+          <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).dp(5).toFormat() }</Text>
+        </Skeleton>
+      ) }
+      { !config.UI.views.tx.hiddenFields?.tx_fee && (
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" w="fit-content">
+          <Text as="span">Fee { config.chain.currency.symbol } </Text>
+          <Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).dp(5).toFormat() }</Text>
+        </Skeleton>
+      ) }
     </Box>
   );
 };

ui/tx/TxDetails.tsx

@@ -45,6 +45,7 @@ import TextSeparator from 'ui/shared/TextSeparator';
 import TxStatus from 'ui/shared/TxStatus';
 import Utilization from 'ui/shared/Utilization/Utilization';
 import TxDetailsActions from 'ui/tx/details/TxDetailsActions';
+import TxDetailsFeePerGas from 'ui/tx/details/TxDetailsFeePerGas';
 import TxDetailsGasPrice from 'ui/tx/details/TxDetailsGasPrice';
 import TxDetailsOther from 'ui/tx/details/TxDetailsOther';
 import TxDetailsTokenTransfers from 'ui/tx/details/TxDetailsTokenTransfers';
@@ -284,33 +285,41 @@ const TxDetails = () => {
 
         <DetailsInfoItemDivider/>
 
-        <DetailsInfoItem
-          title="Value"
-          hint="Value sent in the native token (and USD) if applicable"
-          isLoading={ isPlaceholderData }
-        >
-          <CurrencyValue
-            value={ data.value }
-            currency={ config.chain.currency.symbol }
-            exchangeRate={ data.exchange_rate }
+        { !config.UI.views.tx.hiddenFields?.value && (
+          <DetailsInfoItem
+            title="Value"
+            hint="Value sent in the native token (and USD) if applicable"
             isLoading={ isPlaceholderData }
-            flexWrap="wrap"
-          />
-        </DetailsInfoItem>
-        <DetailsInfoItem
-          title="Transaction fee"
-          hint="Total transaction fee"
-          isLoading={ isPlaceholderData }
-        >
-          <CurrencyValue
-            value={ data.fee.value }
-            currency={ config.chain.currency.symbol }
-            exchangeRate={ data.exchange_rate }
-            flexWrap="wrap"
+          >
+            <CurrencyValue
+              value={ data.value }
+              currency={ config.chain.currency.symbol }
+              exchangeRate={ data.exchange_rate }
+              isLoading={ isPlaceholderData }
+              flexWrap="wrap"
+            />
+          </DetailsInfoItem>
+        ) }
+        { !config.UI.views.tx.hiddenFields?.tx_fee && (
+          <DetailsInfoItem
+            title="Transaction fee"
+            hint="Total transaction fee"
             isLoading={ isPlaceholderData }
-          />
-        </DetailsInfoItem>
+          >
+            <CurrencyValue
+              value={ data.fee.value }
+              currency={ config.UI.views.tx.hiddenFields?.fee_currency ? '' : config.chain.currency.symbol }
+              exchangeRate={ data.exchange_rate }
+              flexWrap="wrap"
+              isLoading={ isPlaceholderData }
+            />
+          </DetailsInfoItem>
+        ) }
+
         <TxDetailsGasPrice gasPrice={ data.gas_price } isLoading={ isPlaceholderData }/>
+
+        <TxDetailsFeePerGas txFee={ data.fee.value } gasUsed={ data.gas_used } isLoading={ isPlaceholderData }/>
+
         <DetailsInfoItem
           title="Gas usage & limit by txn"
           hint="Actual gas amount used by the transaction"
@@ -321,7 +330,8 @@ const TxDetails = () => {
           <Skeleton isLoaded={ !isPlaceholderData }>{ BigNumber(data.gas_limit).toFormat() }</Skeleton>
           <Utilization ml={ 4 } value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() } isLoading={ isPlaceholderData }/>
         </DetailsInfoItem>
-        { (data.base_fee_per_gas || data.max_fee_per_gas || data.max_priority_fee_per_gas) && (
+        { !config.UI.views.tx.hiddenFields?.gas_fees &&
+          (data.base_fee_per_gas || data.max_fee_per_gas || data.max_priority_fee_per_gas) && (
           <DetailsInfoItem
             title="Gas fees (Gwei)"
             // eslint-disable-next-line max-len
@@ -354,7 +364,7 @@ const TxDetails = () => {
             ) }
           </DetailsInfoItem>
         ) }
-        { data.tx_burnt_fee && !config.features.rollup.isEnabled && (
+        { data.tx_burnt_fee && !config.UI.views.tx.hiddenFields?.burnt_fees && !config.features.rollup.isEnabled && (
           <DetailsInfoItem
             title="Burnt fees"
             hint={ `Amount of ${ config.chain.currency.symbol } burned for this transaction. Equals Block Base Fee per Gas * Gas Used` }

ui/tx/details/TxDetailsFeePerGas.tsx

+import { Skeleton } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import config from 'configs/app';
+import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+
+interface Props {
+  txFee: string;
+  gasUsed: string | null;
+  isLoading?: boolean;
+}
+
+const TxDetailsFeePerGas = ({ txFee, gasUsed, isLoading }: Props) => {
+  if (!config.UI.views.tx.additionalFields?.fee_per_gas || !gasUsed) {
+    return null;
+  }
+
+  return (
+    <DetailsInfoItem
+      title="Fee per gas"
+      hint="Fee per gas"
+      isLoading={ isLoading }
+    >
+      <Skeleton isLoaded={ !isLoading } mr={ 1 }>
+        { BigNumber(txFee).dividedBy(10 ** config.chain.currency.decimals).dividedBy(gasUsed).toFixed() }
+        { config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ config.chain.currency.symbol }` }
+      </Skeleton>
+    </DetailsInfoItem>
+  );
+};
+
+export default TxDetailsFeePerGas;

ui/tx/details/TxDetailsGasPrice.tsx

@@ -12,6 +12,10 @@ interface Props {
 }
 
 const TxDetailsGasPrice = ({ gasPrice, isLoading }: Props) => {
+  if (config.UI.views.tx.hiddenFields?.gas_price) {
+    return null;
+  }
+
   return (
     <DetailsInfoItem
       title="Gas price"

ui/txs/TxAdditionalInfoContent.tsx

@@ -30,19 +30,21 @@ const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => {
   return (
     <>
       <Heading as="h4" size="sm" mb={ 6 }>Additional info </Heading>
-      <Box { ...sectionProps } mb={ 4 }>
-        <Text { ...sectionTitleProps }>Transaction fee</Text>
-        <Flex>
-          <CurrencyValue
-            value={ tx.fee.value }
-            currency={ config.chain.currency.symbol }
-            exchangeRate={ tx.exchange_rate }
-            accuracyUsd={ 2 }
-            flexWrap="wrap"
-            rowGap={ 0 }
-          />
-        </Flex>
-      </Box>
+      { !config.UI.views.tx.hiddenFields?.tx_fee && (
+        <Box { ...sectionProps } mb={ 4 }>
+          <Text { ...sectionTitleProps }>Transaction fee</Text>
+          <Flex>
+            <CurrencyValue
+              value={ tx.fee.value }
+              currency={ config.UI.views.tx.hiddenFields?.fee_currency ? '' : config.chain.currency.symbol }
+              exchangeRate={ tx.exchange_rate }
+              accuracyUsd={ 2 }
+              flexWrap="wrap"
+              rowGap={ 0 }
+            />
+          </Flex>
+        </Box>
+      ) }
       { tx.gas_used !== null && (
         <Box { ...sectionProps } mb={ 4 }>
           <Text { ...sectionTitleProps }>Gas limit & usage by transaction</Text>
@@ -54,7 +56,8 @@ const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => {
           </Flex>
         </Box>
       ) }
-      { (tx.base_fee_per_gas !== null || tx.max_fee_per_gas !== null || tx.max_priority_fee_per_gas !== null) && (
+      { !config.UI.views.tx.hiddenFields?.gas_fees &&
+        (tx.base_fee_per_gas !== null || tx.max_fee_per_gas !== null || tx.max_priority_fee_per_gas !== null) && (
         <Box { ...sectionProps } mb={ 4 }>
           <Text { ...sectionTitleProps }>Gas fees (Gwei)</Text>
           { tx.base_fee_per_gas !== null && (

ui/txs/TxsListItem.tsx

@@ -118,14 +118,20 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
           />
         ) : '-' }
       </Flex>
-      <Box mt={ 2 }>
-        <Skeleton isLoaded={ !isLoading } display="inline-block" whiteSpace="pre">Value { config.chain.currency.symbol } </Skeleton>
-        <Skeleton isLoaded={ !isLoading } display="inline-block" variant="text_secondary">{ getValueWithUnit(tx.value).toFormat() }</Skeleton>
-      </Box>
-      <Box mt={ 2 } mb={ 3 }>
-        <Skeleton isLoaded={ !isLoading } display="inline-block" whiteSpace="pre">Fee { config.chain.currency.symbol } </Skeleton>
-        <Skeleton isLoaded={ !isLoading } display="inline-block" variant="text_secondary">{ getValueWithUnit(tx.fee.value).toFormat() }</Skeleton>
-      </Box>
+      { !config.UI.views.tx.hiddenFields?.value && (
+        <Box mt={ 2 }>
+          <Skeleton isLoaded={ !isLoading } display="inline-block" whiteSpace="pre">Value { config.chain.currency.symbol } </Skeleton>
+          <Skeleton isLoaded={ !isLoading } display="inline-block" variant="text_secondary">{ getValueWithUnit(tx.value).toFormat() }</Skeleton>
+        </Box>
+      ) }
+      { !config.UI.views.tx.hiddenFields?.tx_fee && (
+        <Box mt={ 2 } mb={ 3 }>
+          <Skeleton isLoaded={ !isLoading } display="inline-block" whiteSpace="pre">
+            Fee{ config.UI.views.tx.hiddenFields?.fee_currency ? ' ' : ` ${ config.chain.currency.symbol } ` }
+          </Skeleton>
+          <Skeleton isLoaded={ !isLoading } display="inline-block" variant="text_secondary">{ getValueWithUnit(tx.fee.value).toFormat() }</Skeleton>
+        </Box>
+      ) }
     </ListItemMobile>
   );
 };

ui/txs/TxsTable.tsx

@@ -51,20 +51,24 @@ const TxsTable = ({
           <Th width={{ xl: '152px', base: '86px' }}>From</Th>
           <Th width={{ xl: currentAddress ? '48px' : '36px', base: currentAddress ? '52px' : '28px' }}></Th>
           <Th width={{ xl: '152px', base: '86px' }}>To</Th>
-          <Th width="20%" isNumeric>
-            <Link onClick={ sort('val') } display="flex" justifyContent="end">
-              { sorting === 'val-asc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(-90deg)"/> }
-              { sorting === 'val-desc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(90deg)"/> }
-              { `Value ${ config.chain.currency.symbol }` }
-            </Link>
-          </Th>
-          <Th width="20%" isNumeric pr={ 5 }>
-            <Link onClick={ sort('fee') } display="flex" justifyContent="end">
-              { sorting === 'fee-asc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(-90deg)"/> }
-              { sorting === 'fee-desc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(90deg)"/> }
-              { `Fee ${ config.chain.currency.symbol }` }
-            </Link>
-          </Th>
+          { !config.UI.views.tx.hiddenFields?.value && (
+            <Th width="20%" isNumeric>
+              <Link onClick={ sort('val') } display="flex" justifyContent="end">
+                { sorting === 'val-asc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(-90deg)"/> }
+                { sorting === 'val-desc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(90deg)"/> }
+                { `Value ${ config.chain.currency.symbol }` }
+              </Link>
+            </Th>
+          ) }
+          { !config.UI.views.tx.hiddenFields?.tx_fee && (
+            <Th width="20%" isNumeric pr={ 5 }>
+              <Link onClick={ sort('fee') } display="flex" justifyContent="end">
+                { sorting === 'fee-asc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(-90deg)"/> }
+                { sorting === 'fee-desc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(90deg)"/> }
+                { `Fee${ config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ config.chain.currency.symbol }` }` }
+              </Link>
+            </Th>
+          ) }
         </Tr>
       </TheadSticky>
       <Tbody>

ui/txs/TxsTableItem.tsx

@@ -13,6 +13,7 @@ import React from 'react';
 
 import type { Transaction } from 'types/api/transaction';
 
+import config from 'configs/app';
 import rightArrowIcon from 'icons/arrows/east.svg';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import Icon from 'ui/shared/chakra/Icon';
@@ -153,12 +154,16 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
           </Flex>
         </Td>
       </Hide>
-      <Td isNumeric>
-        <CurrencyValue value={ tx.value } accuracy={ 8 } isLoading={ isLoading }/>
-      </Td>
-      <Td isNumeric>
-        <CurrencyValue value={ tx.fee.value } accuracy={ 8 } isLoading={ isLoading }/>
-      </Td>
+      { !config.UI.views.tx.hiddenFields?.value && (
+        <Td isNumeric>
+          <CurrencyValue value={ tx.value } accuracy={ 8 } isLoading={ isLoading }/>
+        </Td>
+      ) }
+      { !config.UI.views.tx.hiddenFields?.tx_fee && (
+        <Td isNumeric>
+          <CurrencyValue value={ tx.fee.value } accuracy={ 8 } isLoading={ isLoading }/>
+        </Td>
+      ) }
     </Tr>
   );
 };