Merge branch 'main' of github.com:blockscout/frontend into tom2drum/i…

…ssue-1035

.github/workflows/pre-release.yml

@@ -40,7 +40,9 @@ jobs:
                         const tag = process.env.TAG;
                         const REGEXP = /^v[0-9]+.[0-9]+.[0-9]+-[a-z]+((\.|-)\d+)?$/i;
                         const match = tag.match(REGEXP);
-                        return match && !match[1] ? 'true' : 'false';
+                        const isInitial = match && !match[1] ? true : false;
+                        core.info('is_initial flag value: ', isInitial);
+                        return isInitial;
 
     label_issues:
         name: Add pre-release label to issues

configs/app/features/index.ts

@@ -17,6 +17,7 @@ export { default as sentry } from './sentry';
 export { default as sol2uml } from './sol2uml';
 export { default as stats } from './stats';
 export { default as suave } from './suave';
+export { default as txInterpretation } from './txInterpretation';
 export { default as web3Wallet } from './web3Wallet';
 export { default as verifiedTokens } from './verifiedTokens';
 export { default as zkEvmRollup } from './zkEvmRollup';

configs/app/features/txInterpretation.ts

@@ -0,0 +1,34 @@
+import type { Feature } from './types';
+import type { Provider } from 'types/client/txInterpretation';
+import { PROVIDERS } from 'types/client/txInterpretation';
+
+import { getEnvValue } from '../utils';
+
+const title = 'Transaction interpretation';
+
+const provider: Provider = (() => {
+  const value = getEnvValue('NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER');
+
+  if (value && PROVIDERS.includes(value as Provider)) {
+    return value as Provider;
+  }
+
+  return 'none';
+})();
+
+const config: Feature<{ provider: Provider }> = (() => {
+  if (provider !== 'none') {
+    return Object.freeze({
+      title,
+      provider,
+      isEnabled: true,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;

configs/envs/.env.eth

@@ -42,6 +42,7 @@ NEXT_PUBLIC_STATS_API_HOST=https://stats-eth-main.k8s.blockscout.com
 NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
 
 #meta
 NEXT_PUBLIC_OG_IMAGE_URL=https://github.com/blockscout/frontend-configs/blob/main/configs/og-images/eth.jpg?raw=true

deploy/tools/envs-validator/schema.ts

@@ -15,6 +15,7 @@ import type { MarketplaceAppOverview } from '../../../types/client/marketplace';
 import { NAVIGATION_LINK_IDS } from '../../../types/client/navigation-items';
 import type { NavItemExternal, NavigationLinkId } from '../../../types/client/navigation-items';
 import type { BridgedTokenChain, TokenBridge } from '../../../types/client/token';
+import { PROVIDERS as TX_INTERPRETATION_PROVIDERS } from '../../../types/client/txInterpretation';
 import type { WalletType } from '../../../types/client/wallets';
 import { SUPPORTED_WALLETS } from '../../../types/client/wallets';
 import type { CustomLink, CustomLinksGroup } from '../../../types/footerLinks';
@@ -438,6 +439,7 @@ const schema = yup
         return isNoneSchema.isValidSync(data) || isArrayOfWalletsSchema.isValidSync(data);
       }),
     NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET: yup.boolean(),
+    NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER: yup.string().oneOf(TX_INTERPRETATION_PROVIDERS),
     NEXT_PUBLIC_AD_TEXT_PROVIDER: yup.string<AdTextProviders>().oneOf(SUPPORTED_AD_TEXT_PROVIDERS),
     NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE: yup.boolean(),
     NEXT_PUBLIC_OG_DESCRIPTION: yup.string(),

docs/ENVS.md

@@ -44,6 +44,7 @@ Please be aware that all environment variables prefixed with `NEXT_PUBLIC_` will
   - [Solidity to UML diagrams](ENVS.md#solidity-to-uml-diagrams)
   - [Blockchain statistics](ENVS.md#blockchain-statistics)
   - [Web3 wallet integration](ENVS.md#web3-wallet-integration-add-token-or-network-to-the-wallet) (add token or network to the wallet)
+  - [Transaction interpretation](ENVS.md#transaction-interpretation)
   - [Verified tokens info](ENVS.md#verified-tokens-info)
   - [Bridged tokens](ENVS.md#bridged-tokens)
   - [Safe{Core} address tags](ENVS.md#safecore-address-tags)
@@ -473,6 +474,14 @@ This feature is **enabled by default** with the `['metamask']` value. To switch
 
  
 
+### Transaction interpretation
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value |
+| --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER | `blockscout` \| `none` | Transaction interpretation provider that displays human readable transaction description | - | `none` | `blockscout` |
+
+ 
+
 ### Verified tokens info
 
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |

lib/api/resources.ts

@@ -65,6 +65,7 @@ import type {
   TransactionsResponseWatchlist,
   TransactionsSorting,
 } from 'types/api/transaction';
+import type { TxInterpretationResponse } from 'types/api/txInterpretation';
 import type { TTxsFilters } from 'types/api/txsFilters';
 import type { TxStateChanges } from 'types/api/txStateChanges';
 import type { VerifiedContractsSorting } from 'types/api/verifiedContracts';
@@ -246,6 +247,10 @@ export const RESOURCES = {
     pathParams: [ 'hash' as const ],
     filterFields: [],
   },
+  tx_interpretation: {
+    path: '/api/v2/transactions/:hash/summary',
+    pathParams: [ 'hash' as const ],
+  },
   withdrawals: {
     path: '/api/v2/withdrawals',
     filterFields: [],
@@ -651,6 +656,7 @@ Q extends 'tx_logs' ? LogsResponseTx :
 Q extends 'tx_token_transfers' ? TokenTransferResponse :
 Q extends 'tx_raw_trace' ? RawTracesResponse :
 Q extends 'tx_state_changes' ? TxStateChanges :
+Q extends 'tx_interpretation' ? TxInterpretationResponse :
 Q extends 'addresses' ? AddressesResponse :
 Q extends 'address' ? Address :
 Q extends 'address_counters' ? AddressCounters :

lib/hooks/useNavItems.tsx

@@ -170,7 +170,6 @@ export default function useNavItems(): ReturnType {
           {
             text: 'Verify contract',
             nextRoute: { pathname: '/contract-verification' as const },
-            icon: 'verify-contract',
             isActive: pathname.startsWith('/contract-verification'),
           },
           ...config.UI.sidebar.otherLinks,

lib/mixpanel/utils.ts

@@ -13,6 +13,7 @@ export enum EventTypes {
   CONTRACT_VERIFICATION = 'Contract verification',
   QR_CODE = 'QR code',
   PAGE_WIDGET = 'Page widget',
+  TX_INTERPRETATION_INTERACTION = 'Transaction interpratetion interaction'
 }
 
 /* eslint-disable @typescript-eslint/indent */
@@ -78,5 +79,8 @@ Type extends EventTypes.QR_CODE ? {
 Type extends EventTypes.PAGE_WIDGET ? {
   'Type': 'Tokens dropdown' | 'Tokens show all (icon)' | 'Add to watchlist' | 'Address actions (more button)';
 } :
+Type extends EventTypes.TX_INTERPRETATION_INTERACTION ? {
+  'Type': 'Address click' | 'Token click';
+} :
 undefined;
 /* eslint-enable @typescript-eslint/indent */

lib/sentry/config.ts

@@ -56,6 +56,7 @@ export const config: Sentry.BrowserOptions | undefined = (() => {
       'Script error.',
 
       // Relay and WalletConnect errors
+      'The quota has been exceeded',
       'Attempt to connect to relay via',
       'WebSocket connection failed for URL: wss://relay.walletconnect.com',
     ],
@@ -67,9 +68,11 @@ export const config: Sentry.BrowserOptions | undefined = (() => {
       // Woopra flakiness
       /eatdifferent\.com\.woopra-ns\.com/i,
       /static\.woopra\.com\/js\/woopra\.js/i,
-      // Chrome extensions
+      // Chrome and other extensions
       /extensions\//i,
       /^chrome:\/\//i,
+      /^chrome-extension:\/\//i,
+      /^moz-extension:\/\//i,
       // Other plugins
       /127\.0\.0\.1:4001\/isrunning/i, // Cacaoweb
       /webappstoolbarba\.texthelp\.com\//i,

mocks/contract/methods.ts

@@ -14,7 +14,7 @@ export const read: Array<SmartContractReadMethod> = [
     method_id: '70a08231',
     name: 'FLASHLOAN_PREMIUM_TOTAL',
     outputs: [
-      { internalType: 'uint256', name: '', type: 'uint256' },
+      { internalType: 'uint256', name: 'amount', type: 'uint256' },
     ],
     payable: false,
     stateMutability: 'view',
@@ -97,7 +97,7 @@ export const read: Array<SmartContractReadMethod> = [
 export const readResultSuccess: SmartContractQueryMethodReadSuccess = {
   is_error: false,
   result: {
-    names: [ 'uint256' ],
+    names: [ 'amount' ],
     output: [
       { type: 'uint256', value: '42' },
     ],

mocks/txs/txInterpretation.ts

@@ -0,0 +1,45 @@
+import type { TxInterpretationResponse } from 'types/api/txInterpretation';
+
+export const txInterpretation: TxInterpretationResponse = {
+  data: {
+    summaries: [ {
+      summary_template: `{action_type} {amount} {token} to {to_address} on {timestamp}`,
+      summary_template_variables: {
+        action_type: { type: 'string', value: 'Transfer' },
+        amount: { type: 'currency', value: '100' },
+        token: {
+          type: 'token',
+          value: {
+            name: 'Duck',
+            type: 'ERC-20',
+            symbol: 'DUCK',
+            address: '0x486a3c5f34cDc4EF133f248f1C81168D78da52e8',
+            holders: '1152',
+            decimals: '18',
+            icon_url: null,
+            total_supply: '210000000000000000000000000',
+            exchange_rate: null,
+            circulating_market_cap: null,
+          },
+        },
+        to_address: {
+          type: 'address',
+          value: {
+            hash: '0x48c04ed5691981C42154C6167398f95e8f38a7fF',
+            implementation_name: null,
+            is_contract: false,
+            is_verified: false,
+            name: null,
+            private_tags: [],
+            public_tags: [],
+            watchlist_names: [],
+          },
+        },
+        timestamp: {
+          type: 'timestamp',
+          value: '1687005431',
+        },
+      },
+    } ],
+  },
+};

nextjs/csp/policies/ad.ts

@@ -9,11 +9,11 @@ export function ad(): CspDev.DirectiveDescriptor {
     'connect-src': [
       'coinzilla.com',
       '*.coinzilla.com',
-      'request-global.czilladx.com',
+      'https://request-global.czilladx.com',
       '*.slise.xyz',
     ],
     'frame-src': [
-      'request-global.czilladx.com',
+      'https://request-global.czilladx.com',
     ],
     'script-src': [
       'coinzillatag.com',
@@ -27,7 +27,7 @@ export function ad(): CspDev.DirectiveDescriptor {
       'cdn.coinzilla.io',
     ],
     'font-src': [
-      'request-global.czilladx.com',
+      'https://request-global.czilladx.com',
     ],
   };
 }

nextjs/csp/policies/app.ts

@@ -9,7 +9,6 @@ import { KEY_WORDS } from '../utils';
 const MAIN_DOMAINS = [
   `*.${ config.app.host }`,
   config.app.host,
-  getFeaturePayload(config.features.sol2uml)?.api.endpoint,
 ].filter(Boolean);
 
 const getCspReportUrl = () => {
@@ -113,6 +112,7 @@ export function app(): CspDev.DirectiveDescriptor {
 
     'font-src': [
       KEY_WORDS.DATA,
+      ...MAIN_DOMAINS,
     ],
 
     'object-src': [

playwright/utils/configs.ts

@@ -29,6 +29,9 @@ export const featureEnvs = {
       value: '[{"type":"omni","title":"OmniBridge","short_title":"OMNI"},{"type":"amb","title":"Arbitrary Message Bridge","short_title":"AMB"}]',
     },
   ],
+  txInterpretation: [
+    { name: 'NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER', value: 'blockscout' },
+  ],
   zkRollup: [
     { name: 'NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK', value: 'true' },
     { name: 'NEXT_PUBLIC_L1_BASE_URL', value: 'https://localhost:3101' },

public/icons/name.d.ts

@@ -52,6 +52,7 @@
 	| "graphQL"
 	| "info"
 	| "key"
+	| "lightning"
 	| "link"
 	| "lock"
 	| "minus"

stubs/txInterpretation.ts

@@ -0,0 +1,34 @@
+import type { TxInterpretationResponse } from 'types/api/txInterpretation';
+
+import { TOKEN_INFO_ERC_20 } from './token';
+
+export const TX_INTERPRETATION: TxInterpretationResponse = {
+  data: {
+    summaries: [
+      {
+        summary_template: '{action_type} {source_amount} Ether into {destination_amount} {destination_token}',
+        summary_template_variables: {
+          action_type: { type: 'string', value: 'Wrap' },
+          source_amount: { type: 'currency', value: '0.7' },
+          destination_amount: { type: 'currency', value: '0.7' },
+          destination_token: {
+            type: 'token',
+            value: TOKEN_INFO_ERC_20,
+          },
+        },
+      },
+      {
+        summary_template: '{action_type} {source_amount} Ether into {destination_amount} {destination_token}',
+        summary_template_variables: {
+          action_type: { type: 'string', value: 'Wrap' },
+          source_amount: { type: 'currency', value: '0.7' },
+          destination_amount: { type: 'currency', value: '0.7' },
+          destination_token: {
+            type: 'token',
+            value: TOKEN_INFO_ERC_20,
+          },
+        },
+      },
+    ],
+  },
+};

types/api/contract.ts

@@ -99,10 +99,10 @@ export interface SmartContractMethodOutput extends SmartContractMethodInput {
 export interface SmartContractQueryMethodReadSuccess {
   is_error: false;
   result: {
-    names: Array<string>;
+    names: Array<string | [ string, Array<string> ]>;
     output: Array<{
       type: string;
-      value: string;
+      value: string | Array<unknown>;
     }>;
   };
 }

types/api/stats.ts

@@ -16,9 +16,9 @@ export type HomeStats = {
 }
 
 export type GasPrices = {
-  average: number;
-  fast: number;
-  slow: number;
+  average: number | null;
+  fast: number | null;
+  slow: number | null;
 }
 
 export type Counters = {