Transaction views customization (#1275)

* Stability UI customizations V0

Fixes #1269

* oops

* [skip ci] clean up

configs/app/ui/views/address.ts

@@ -1,16 +1,32 @@
-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');
 
   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

@@ -1,2 +1,3 @@
-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

@@ -0,0 +1,41 @@
+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

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

@@ -0,0 +1,18 @@
+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>
   );
 };