Merge branch 'main' of github.com:blockscout/frontend into feat/token…

…-icon-in-search

.env.template

@@ -45,6 +45,9 @@ NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER=__PLACEHOLDER_FOR_NEXT_PUBLIC_HOMEPAGE_SHO
 NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME=__PLACEHOLDER_FOR_NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME__
 NEXT_PUBLIC_AD_DOMAIN_WITH_AD=__PLACEHOLDER_FOR_NEXT_PUBLIC_AD_DOMAIN_WITH_AD__
 NEXT_PUBLIC_AD_ADBUTLER_ON=__PLACEHOLDER_FOR_NEXT_PUBLIC_AD_ADBUTLER_ON__
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP=__PLACEHOLDER_FOR_NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP__
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE=__PLACEHOLDER_FOR_NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE__
+NEXT_PUBLIC_AD_SLISE_ON=__PLACEHOLDER_FOR_NEXT_PUBLIC_AD_SLISE_ON__
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=__PLACEHOLDER_FOR_NEXT_PUBLIC_GRAPHIQL_TRANSACTION__
 NEXT_PUBLIC_WEB3_DEFAULT_WALLET=__PLACEHOLDER_FOR_NEXT_PUBLIC_WEB3_DEFAULT_WALLET__
 NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET=__PLACEHOLDER_FOR_NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET__

configs/app/config.ts

@@ -1,4 +1,5 @@
 /* eslint-disable no-restricted-properties */
+import type { AdButlerConfig } from 'types/client/adButlerConfig';
 import type { NavItemExternal } from 'types/client/navigation-items';
 import type { WalletType } from 'types/client/wallets';
 import type { NetworkExplorer } from 'types/networks';
@@ -114,6 +115,9 @@ const config = Object.freeze({
   ad: {
     domainWithAd: getEnvValue(process.env.NEXT_PUBLIC_AD_DOMAIN_WITH_AD) || 'blockscout.com',
     adButlerOn: getEnvValue(process.env.NEXT_PUBLIC_AD_ADBUTLER_ON) === 'true',
+    adButlerConfigDesktop: parseEnvJson<AdButlerConfig>(getEnvValue(process.env.NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP)),
+    adButlerConfigMobile: parseEnvJson<AdButlerConfig>(getEnvValue(process.env.NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE)),
+    sliseOn: getEnvValue(process.env.NEXT_PUBLIC_AD_SLISE_ON) === 'true',
   },
   web3: {
     defaultWallet: getWeb3DefaultWallet(),

deploy/values/review/values.yaml.gotmpl

@@ -133,3 +133,5 @@ frontend:
       _default: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY
     NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID:
       _default: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID
+    NEXT_PUBLIC_AD_SLISE_ON:
+      _default: 'true'

docs/ENVS.md

@@ -46,6 +46,9 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME | `boolean` | Set to false if average block time is useless for the network | - | `true` | `false` |
 | NEXT_PUBLIC_AD_DOMAIN_WITH_AD | `string` | The domain on which we display ads | - | - | `blockscout.com` |
 | NEXT_PUBLIC_AD_ADBUTLER_ON | `boolean` | Set to true to show Adbutler banner instead of Coinzilla banner | - | `false` | `true` |
+| NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP | `{ id: string; width: string; height: string }` | Placement config for desktop Adbutler banner | - | - | `{'id':'123456','width':'728','height':'90'}` |
+| NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE | `{ id: string; width: number; height: number }` | Placement config for mobile Adbutler banner | - | - | `{'id':'654321','width':'300','height':'100'}` |
+| NEXT_PUBLIC_AD_SLISE_ON | `boolean` | Set to true to show Slise banner instead of Coinzilla banner | - | `false` | `true` |
 | NEXT_PUBLIC_API_SPEC_URL | `string` | Spec to be displayed on api-docs page | - | - | `https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml` |
 | NEXT_PUBLIC_GRAPHIQL_TRANSACTION | `string` | Txn hash for default query at GraphQl playground page | - | - | `0x69e3923eef50eada197c3336d546936d0c994211492c9f947a24c02827568f9f` |
 | NEXT_PUBLIC_WEB3_DEFAULT_WALLET | `metamask` \| `coinbase`| Type of Web3 wallet which will be used by default to add tokens or chains to | - | `metamask` | `coinbase` |

lib/api/buildUrl.ts

@@ -18,8 +18,8 @@ export default function buildUrl<R extends ResourceName>(
   const url = new URL(compile(path)(pathParams), baseUrl);
 
   queryParams && Object.entries(queryParams).forEach(([ key, value ]) => {
-    // there are some pagination params that can be null for the next page
-    (value || value === null) && url.searchParams.append(key, String(value));
+    // there are some pagination params that can be null or false for the next page
+    value !== undefined && value !== '' && url.searchParams.append(key, String(value));
   });
 
   return url.toString();

lib/csp/policies/ad.ts

@@ -1,6 +1,9 @@
+import Base64 from 'crypto-js/enc-base64';
+import sha256 from 'crypto-js/sha256';
 import type CspDev from 'csp-dev';
 
 import isSelfHosted from 'lib/isSelfHosted';
+import { connectAdbutler, placeAd } from 'ui/shared/ad/adbutlerScript';
 
 export function ad(): CspDev.DirectiveDescriptor {
   if (!isSelfHosted()) {
@@ -12,17 +15,17 @@ export function ad(): CspDev.DirectiveDescriptor {
       'coinzilla.com',
       '*.coinzilla.com',
       'request-global.czilladx.com',
+      '*.slise.xyz',
     ],
     'frame-src': [
       'request-global.czilladx.com',
     ],
     'script-src': [
       'coinzillatag.com',
       'servedbyadbutler.com',
-      // what hash is this?
-      '\'sha256-wMOeDjJaOTjCfNjluteV+tSqHW547T89sgxd8W6tQJM=\'',
-      // what hash is this?
-      '\'sha256-FcyIn1h7zra8TVnnRhYrwrplxJW7dpD5TV7kP2AG/kI=\'',
+      `'sha256-${ Base64.stringify(sha256(connectAdbutler)) }'`,
+      `'sha256-${ Base64.stringify(sha256(placeAd)) }'`,
+      '*.slise.xyz',
     ],
     'img-src': [
       'servedbyadbutler.com',

mocks/tokens/tokenInfo.ts

@@ -2,6 +2,7 @@ import type { TokenCounters, TokenInfo } from 'types/api/token';
 
 export const tokenInfo: TokenInfo = {
   address: '0x55d536e4d6c1993d8ef2e2a4ef77f02088419420',
+  circulating_market_cap: '117629601.61913824',
   decimals: '18',
   exchange_rate: '2.0101',
   holders: '46554',
@@ -19,6 +20,7 @@ export const tokenCounters: TokenCounters = {
 
 export const tokenInfoERC20a: TokenInfo = {
   address: '0xb2a90505dc6680a7a695f7975d0d32EeF610f456',
+  circulating_market_cap: '117268489.23970924',
   decimals: '18',
   exchange_rate: null,
   holders: '23',
@@ -31,6 +33,7 @@ export const tokenInfoERC20a: TokenInfo = {
 
 export const tokenInfoERC20b: TokenInfo = {
   address: '0xc1116c98ba622a6218433fF90a2E40DEa482d7A7',
+  circulating_market_cap: '115060192.36105014',
   decimals: '6',
   exchange_rate: '0.982',
   holders: '17',
@@ -43,6 +46,7 @@ export const tokenInfoERC20b: TokenInfo = {
 
 export const tokenInfoERC20c: TokenInfo = {
   address: '0xc1116c98ba622a6218433fF90a2E40DEa482d7A7',
+  circulating_market_cap: null,
   decimals: '18',
   exchange_rate: '1328.89',
   holders: '17',
@@ -55,6 +59,7 @@ export const tokenInfoERC20c: TokenInfo = {
 
 export const tokenInfoERC20d: TokenInfo = {
   address: '0xCc7bb2D219A0FC08033E130629C2B854b7bA9195',
+  circulating_market_cap: null,
   decimals: '18',
   exchange_rate: null,
   holders: '102625',
@@ -67,6 +72,7 @@ export const tokenInfoERC20d: TokenInfo = {
 
 export const tokenInfoERC20LongSymbol: TokenInfo = {
   address: '0xCc7bb2D219A0FC08033E130629C2B854b7bA9195',
+  circulating_market_cap: '112855875.75888918',
   decimals: '18',
   exchange_rate: '1328.89',
   holders: '102625',
@@ -79,6 +85,7 @@ export const tokenInfoERC20LongSymbol: TokenInfo = {
 
 export const tokenInfoERC721a: TokenInfo = {
   address: '0xDe7cAc71E072FCBd4453E5FB3558C2684d1F88A0',
+  circulating_market_cap: null,
   decimals: null,
   exchange_rate: null,
   holders: '7',
@@ -91,6 +98,7 @@ export const tokenInfoERC721a: TokenInfo = {
 
 export const tokenInfoERC721b: TokenInfo = {
   address: '0xA8d5C7beEA8C9bB57f5fBa35fB638BF45550b11F',
+  circulating_market_cap: null,
   decimals: null,
   exchange_rate: null,
   holders: '2',
@@ -103,6 +111,7 @@ export const tokenInfoERC721b: TokenInfo = {
 
 export const tokenInfoERC721c: TokenInfo = {
   address: '0x47646F1d7dc4Dd2Db5a41D092e2Cf966e27A4992',
+  circulating_market_cap: null,
   decimals: null,
   exchange_rate: null,
   holders: '12',
@@ -115,6 +124,7 @@ export const tokenInfoERC721c: TokenInfo = {
 
 export const tokenInfoERC721LongSymbol: TokenInfo = {
   address: '0x47646F1d7dc4Dd2Db5a41D092e2Cf966e27A4992',
+  circulating_market_cap: null,
   decimals: null,
   exchange_rate: null,
   holders: '12',
@@ -127,6 +137,7 @@ export const tokenInfoERC721LongSymbol: TokenInfo = {
 
 export const tokenInfoERC1155a: TokenInfo = {
   address: '0x4b333DEd10c7ca855EA2C8D4D90A0a8b73788c8e',
+  circulating_market_cap: null,
   decimals: null,
   exchange_rate: null,
   holders: '22',
@@ -139,6 +150,7 @@ export const tokenInfoERC1155a: TokenInfo = {
 
 export const tokenInfoERC1155b: TokenInfo = {
   address: '0xf4b71b179132ad457f6bcae2a55efa9e4b26eefc',
+  circulating_market_cap: null,
   decimals: null,
   exchange_rate: null,
   holders: '100',
@@ -151,6 +163,7 @@ export const tokenInfoERC1155b: TokenInfo = {
 
 export const tokenInfoERC1155WithoutName: TokenInfo = {
   address: '0x4b333DEd10c7ca855EA2C8D4D90A0a8b73788c8e',
+  circulating_market_cap: null,
   decimals: null,
   exchange_rate: null,
   holders: '22',

mocks/tokens/tokenTransfer.ts

@@ -23,6 +23,7 @@ export const erc20: TokenTransfer = {
   },
   token: {
     address: '0x55d536e4d6c1993d8ef2e2a4ef77f02088419420',
+    circulating_market_cap: '117629601.61913824',
     decimals: '18',
     exchange_rate: null,
     holders: '46554',
@@ -67,6 +68,7 @@ export const erc721: TokenTransfer = {
   },
   token: {
     address: '0x363574E6C5C71c343d7348093D84320c76d5Dd29',
+    circulating_market_cap: null,
     decimals: null,
     exchange_rate: null,
     holders: '63090',
@@ -110,6 +112,7 @@ export const erc1155A: TokenTransfer = {
   },
   token: {
     address: '0xF56b7693E4212C584de4a83117f805B8E89224CB',
+    circulating_market_cap: null,
     decimals: null,
     exchange_rate: null,
     holders: '1',

mocks/txs/state.ts

@@ -24,6 +24,7 @@ export const mintToken: TxStateChange = {
   is_miner: false,
   token: {
     address: '0x8977EA6C55e878125d1bF3433EBf72138B7a4543',
+    circulating_market_cap: null,
     decimals: null,
     exchange_rate: null,
     holders: '9191',
@@ -60,6 +61,7 @@ export const receiveMintedToken: TxStateChange = {
   is_miner: false,
   token: {
     address: '0x8977EA6C55e878125d1bF3433EBf72138B7a4543',
+    circulating_market_cap: null,
     decimals: null,
     exchange_rate: null,
     holders: '9191',
@@ -89,6 +91,7 @@ export const transfer1155Token: TxStateChange = {
   is_miner: false,
   token: {
     address: '0x56Cc277717106E528A9FcC2CD342Ff98db758041',
+    circulating_market_cap: null,
     decimals: null,
     exchange_rate: null,
     holders: '50413',

package.json

@@ -41,6 +41,7 @@
     "@sentry/nextjs": "^7.12.1",
     "@sentry/react": "^7.24.0",
     "@sentry/tracing": "^7.24.0",
+    "@slise/embed-react": "^2.2.0",
     "@tanstack/react-query": "^4.0.10",
     "@tanstack/react-query-devtools": "^4.0.10",
     "@types/papaparse": "^5.3.5",
@@ -49,6 +50,7 @@
     "@web3modal/react": "^2.4.1",
     "bignumber.js": "^9.1.0",
     "chakra-react-select": "^4.4.3",
+    "crypto-js": "^4.1.1",
     "d3": "^7.6.1",
     "dayjs": "^1.11.5",
     "dom-to-image": "^2.6.0",
@@ -87,6 +89,7 @@
     "@svgr/webpack": "^6.5.1",
     "@testing-library/react": "^13.4.0",
     "@total-typescript/ts-reset": "^0.3.7",
+    "@types/crypto-js": "^4.1.1",
     "@types/csp-dev": "^1.0.0",
     "@types/d3": "^7.4.0",
     "@types/dom-to-image": "^2.6.4",

stubs/token.ts

@@ -8,6 +8,7 @@ import { generateListStub } from './utils';
 
 export const TOKEN_INFO_ERC_20: TokenInfo<'ERC-20'> = {
   address: ADDRESS_HASH,
+  circulating_market_cap: '117629601.61913824',
   decimals: '18',
   exchange_rate: '0.999997',
   holders: '16026',
@@ -20,11 +21,13 @@ export const TOKEN_INFO_ERC_20: TokenInfo<'ERC-20'> = {
 
 export const TOKEN_INFO_ERC_721: TokenInfo<'ERC-721'> = {
   ...TOKEN_INFO_ERC_20,
+  circulating_market_cap: null,
   type: 'ERC-721',
 };
 
 export const TOKEN_INFO_ERC_1155: TokenInfo<'ERC-1155'> = {
   ...TOKEN_INFO_ERC_20,
+  circulating_market_cap: null,
   type: 'ERC-1155',
 };
 

types/api/token.ts

@@ -13,6 +13,7 @@ export interface TokenInfo<T extends TokenType = TokenType> {
   exchange_rate: string | null;
   total_supply: string | null;
   icon_url: string | null;
+  circulating_market_cap: string | null;
 }
 
 export interface TokenCounters {

types/api/txStateChanges.ts

@@ -45,7 +45,6 @@ export type TxStateChanges = {
   items: Array<TxStateChange>;
   next_page_params: {
     items_count: number;
-    // ???
     state_changes: null;
   };
 };

types/client/adButlerConfig.ts

@@ -0,0 +1,5 @@
+export type AdButlerConfig = {
+  id: string;
+  width: string;
+  height: string;
+}

ui/address/AddressContract.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import type { RoutedSubTab } from 'ui/shared/Tabs/types';
 
-import { ContractContextProvider } from 'ui/address/contract/context';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 import Web3ModalProvider from 'ui/shared/Web3ModalProvider';
 
@@ -15,17 +14,17 @@ const TAB_LIST_PROPS = {
   columnGap: 3,
 };
 
-const AddressContract = ({ addressHash, tabs }: Props) => {
+const AddressContract = ({ tabs }: Props) => {
   const fallback = React.useCallback(() => {
     const noProviderTabs = tabs.filter(({ id }) => id === 'contact_code');
-    return <RoutedTabs tabs={ noProviderTabs } variant="outline" colorScheme="gray" size="sm" tabListProps={ TAB_LIST_PROPS }/>;
+    return (
+      <RoutedTabs tabs={ noProviderTabs } variant="outline" colorScheme="gray" size="sm" tabListProps={ TAB_LIST_PROPS }/>
+    );
   }, [ tabs ]);
 
   return (
     <Web3ModalProvider fallback={ fallback }>
-      <ContractContextProvider addressHash={ addressHash }>
-        <RoutedTabs tabs={ tabs } variant="outline" colorScheme="gray" size="sm" tabListProps={ TAB_LIST_PROPS }/>
-      </ContractContextProvider>
+      <RoutedTabs tabs={ tabs } variant="outline" colorScheme="gray" size="sm" tabListProps={ TAB_LIST_PROPS }/>
     </Web3ModalProvider>
   );
 };

ui/address/contract/ContractCode.tsx

@@ -212,16 +212,10 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
             isLoading={ isPlaceholderData }
           />
         ) }
-        { data?.source_code && (
+        { data?.is_verified && (
           <ContractSourceCode
-            data={ data.source_code }
-            hasSol2Yml={ Boolean(data.can_be_visualized_via_sol2uml) }
             address={ addressHash }
-            isViper={ Boolean(data.is_vyper_contract) }
-            filePath={ data.file_path }
-            additionalSource={ data.additional_sources }
-            remappings={ data.compiler_settings?.remappings }
-            isLoading={ isPlaceholderData }
+            implementationAddress={ addressInfo?.implementation_address ?? undefined }
           />
         ) }
         { data?.compiler_settings ? (