Merge branch 'main' of github.com:blockscout/frontend into feat/verified-tokens

.env.template

@@ -44,12 +44,15 @@ NEXT_PUBLIC_HOMEPAGE_SHOW_AVG_BLOCK_TIME=__PLACEHOLDER_FOR_NEXT_PUBLIC_HOMEPAGE_
 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_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__
 
 # api config
 NEXT_PUBLIC_API_HOST=__PLACEHOLDER_FOR_NEXT_PUBLIC_API_HOST__
 NEXT_PUBLIC_API_BASE_PATH=__PLACEHOLDER_FOR_NEXT_PUBLIC_API_BASE_PATH__
 NEXT_PUBLIC_API_PROTOCOL=__PLACEHOLDER_FOR_NEXT_PUBLIC_API_PROTOCOL__
 NEXT_PUBLIC_API_PORT=__PLACEHOLDER_FOR_NEXT_PUBLIC_API_PORT__
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=__PLACEHOLDER_FOR_NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL__
 NEXT_PUBLIC_STATS_API_HOST=__PLACEHOLDER_FOR_NEXT_PUBLIC_STATS_API_HOST__
 NEXT_PUBLIC_VISUALIZE_API_HOST=__PLACEHOLDER_FOR_NEXT_PUBLIC_VISUALIZE_API_HOST__
 NEXT_PUBLIC_CONTRACT_INFO_API_HOST=__PLACEHOLDER_FOR_NEXT_PUBLIC_CONTRACT_INFO_API_HOST__
@@ -67,3 +70,6 @@ NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID=__PLACEHOLDER_FOR_NEXT_PUBLIC_GOOGLE_AN
 NEXT_PUBLIC_IS_L2_NETWORK=__PLACEHOLDER_FOR_NEXT_PUBLIC_IS_L2_NETWORKL__
 NEXT_PUBLIC_L1_BASE_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_L1_BASE_URL__
 NEXT_PUBLIC_L2_WITHDRAWAL_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_L2_WITHDRAWAL_URL__
+
+# beacon chain config
+NEXT_PUBLIC_HAS_BEACON_CHAIN=__PLACEHOLDER_FOR_NEXT_PUBLIC_HAS_BEACON_CHAIN__

.eslintrc.js

@@ -199,7 +199,7 @@ module.exports = {
         groups: [
           'module',
           '/types/',
-          [ '/^configs/', '/^data/', '/^deploy/', '/^icons/', '/^lib/', '/^mocks/', '/^pages/', '/^playwright/', '/^theme/', '/^ui/' ],
+          [ '/^configs/', '/^data/', '/^deploy/', '/^icons/', '/^lib/', '/^mocks/', '/^pages/', '/^playwright/', '/^stubs/', '/^theme/', '/^ui/' ],
           [ 'parent', 'sibling', 'index' ],
         ],
         alphabetize: { order: 'asc', ignoreCase: true },

.vscode/tasks.json

@@ -68,7 +68,7 @@
         },
         {
             "type": "shell",
-            "command": "NEXT_PUBLIC_L1_BASE_URL=https://${input:goerliApiHost} yarn dev:goerli:optimism",
+            "command": "NEXT_PUBLIC_API_HOST=${input:L2ApiHost} NEXT_PUBLIC_L1_BASE_URL=https://${input:goerliApiHost} yarn dev:goerli:optimism",
             "problemMatcher": [],
             "label": "dev server: goerli optimism",
             "detail": "start local dev server for Goerli Optimism network",
@@ -379,5 +379,15 @@
             ],
             "default": ""
         },
+        {
+            "type": "pickString",
+            "id": "L2ApiHost",
+            "description": "Choose L2 API host:",
+            "options": [
+              "blockscout-optimism-goerli.test.aws-k8s.blockscout.com",
+              "base-goerli.blockscout.com",
+            ],
+            "default": ""
+        },
     ],
 }
\ No newline at end of file

configs/app/config.ts

 /* eslint-disable no-restricted-properties */
+import type { WalletType } from 'types/client/wallets';
 import type { NetworkExplorer } from 'types/networks';
 import type { ChainIndicatorId } from 'ui/home/indicators/types';
 
@@ -11,6 +12,15 @@ const parseEnvJson = <DataType>(env: string | undefined): DataType | null => {
   }
 };
 const stripTrailingSlash = (str: string) => str[str.length - 1] === '/' ? str.slice(0, -1) : str;
+const getWeb3DefaultWallet = (): WalletType => {
+  const envValue = getEnvValue(process.env.NEXT_PUBLIC_WEB3_DEFAULT_WALLET);
+  const SUPPORTED_WALLETS: Array<WalletType> = [
+    'metamask',
+    'coinbase',
+  ];
+
+  return (envValue && SUPPORTED_WALLETS.includes(envValue) ? envValue : 'metamask') as WalletType;
+};
 
 const env = process.env.NODE_ENV;
 const isDev = env === 'development';
@@ -36,6 +46,8 @@ const apiEndpoint = apiHost ? [
   apiPort && ':' + apiPort,
 ].filter(Boolean).join('') : 'https://blockscout.com';
 
+const socketSchema = getEnvValue(process.env.NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL) || 'wss';
+
 const logoutUrl = (() => {
   try {
     const envUrl = getEnvValue(process.env.NEXT_PUBLIC_LOGOUT_URL);
@@ -104,10 +116,14 @@ const config = Object.freeze({
     domainWithAd: getEnvValue(process.env.NEXT_PUBLIC_AD_DOMAIN_WITH_AD) || 'blockscout.com',
     adButlerOn: getEnvValue(process.env.NEXT_PUBLIC_AD_ADBUTLER_ON) === 'true',
   },
+  web3: {
+    defaultWallet: getWeb3DefaultWallet(),
+    disableAddTokenToWallet: getEnvValue(process.env.NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET) === 'true',
+  },
   api: {
     host: apiHost,
     endpoint: apiEndpoint,
-    socket: apiHost ? `wss://${ apiHost }` : 'wss://blockscout.com',
+    socket: apiHost ? `${ socketSchema }://${ apiHost }` : 'wss://blockscout.com',
     basePath: stripTrailingSlash(getEnvValue(process.env.NEXT_PUBLIC_API_BASE_PATH) || ''),
   },
   L2: {
@@ -115,6 +131,9 @@ const config = Object.freeze({
     L1BaseUrl: getEnvValue(process.env.NEXT_PUBLIC_L1_BASE_URL),
     withdrawalUrl: getEnvValue(process.env.NEXT_PUBLIC_L2_WITHDRAWAL_URL) || '',
   },
+  beaconChain: {
+    hasBeaconChain: getEnvValue(process.env.NEXT_PUBLIC_HAS_BEACON_CHAIN) === 'true',
+  },
   statsApi: {
     endpoint: getEnvValue(process.env.NEXT_PUBLIC_STATS_API_HOST),
     basePath: '',

configs/envs/.env.goerli.optimism

@@ -3,6 +3,8 @@ NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/front
 NEXT_PUBLIC_NETWORK_EXPLORERS=
 NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT=linear-gradient(136.9deg,rgb(107 94 236) 1.5%,rgb(0 82 255) 56.84%,rgb(82 62 231) 98.54%)
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x4a0ed8ddf751a7cb5297f827699117b0f6d21a0b2907594d300dc9fed75c7e62
+NEXT_PUBLIC_WEB3_DEFAULT_WALLET=coinbase
+NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET=true
 
 # network config
 NEXT_PUBLIC_NETWORK_NAME=Base Göerli
@@ -10,14 +12,14 @@ NEXT_PUBLIC_NETWORK_SHORT_NAME=Base
 NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME=optimism
 NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-logos/base.svg
 NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-icons/base.svg
-NEXT_PUBLIC_NETWORK_ID=420
+NEXT_PUBLIC_NETWORK_ID=84531
 NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
 NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
 NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
 NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS=
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
 NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://goerli.optimism.io
+NEXT_PUBLIC_NETWORK_RPC_URL=https://goerli.base.org
 NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/marketplace/base-goerli.json
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrqUAcjgGJ4jU88C
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']

configs/envs/.env.poa_core

@@ -4,8 +4,8 @@ NEXT_PUBLIC_FOOTER_STAKING_LINK=https://duneanalytics.com/maxaleks/xdai-staking
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth-goerli.json
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/transaction','address':'/ethereum/poa/core/address'}}]
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cup']
-#NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT='linear-gradient(136.9deg, #235643 1.5%, #16191E 77.77%)'
-#NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR='#DCFE76'
+#NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT=linear-gradient(136.9deg, \#235643 1.5%, \#16191E 77.77%)
+#NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR=\#DCFE76
 NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-logos/poa.svg
 NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/network-icons/poa.svg
 

deploy/values/l2-optimism-goerli/secrets.yaml

 blockscout:
     environment:
+        INDEXER_OPTIMISM_L1_RPC:
+            _default: ENC[AES256_GCM,data:a02FoR3U/KlxsFVFiSGSLdFOFIDwS5eBgw==,iv:rmT8bVh3xyqKeebtnT+/eIC0bSGWKZhJ9H52cUsqFxM=,tag:OsRo1D2DtfMIgCGjAvqobw==,type:str]
         ACCOUNT_USERNAME:
             _default: ENC[AES256_GCM,data:n9Wc7xjBFdWHJNaKBwpVVykz3FbBtqicKdf6yD/kMLKuts/0Rv8vfQ20gSahIvSbbno=,iv:FRyRAwelWF1PHqbIJX09MH+VVqW53luYraLYq/A21j4=,tag:YUejqoXCZjWNUhRZ9emd+g==,type:str]
         ACCOUNT_PASSWORD:
@@ -16,10 +18,6 @@ blockscout:
             _default: ENC[AES256_GCM,data:bgP4VwZ91eMzJVQ3/+fkqNCwBIAv3P12qRoGWu9QkfCKpj3e+Dwt1qjsYV1iNkcjQAJx3jOpVGlsbgdcBGFzHw==,iv:gpa6tbkxHv56wwI3Owdnr5MArJYdiVO3A0UMOsrgCls=,tag:CIgupR1ZNjsVtFYVG2OtHA==,type:str]
         ACCOUNT_AUTH0_CALLBACK_URL:
             _default: ENC[AES256_GCM,data:+EoMWtXdJA5DnRprCaps38VbQlLcJikKvB7FA0VMhaw+aq1d/rh5yIxl/CQBIo2eO8EESoVz6eUjzvgchbmv2IaiGgG3DnZx,iv:nfPmwEZMXM2SOIZ3OMr5u7GTbX6ni5VuFpn5SyHKMfE=,tag:4ePZ5NZ+rdBZf8xWDfEbzA==,type:str]
-        ACCOUNT_AUTH0_LOGOUT_RETURN_URL:
-            _default: ENC[AES256_GCM,data:Kw/WWdVpNWAOjwMLM2GJtQs0PaLQNth2w6qEU6vY86A6r0kdGO1If5XA14h8OiGIfGQ+KNizNaB5eTxmjUMPug==,iv:9idS4yx/ETwGaEGyUBsgcf8siyRo0aF0rGSOzO0uzw4=,tag:Z7fqs0YEavA0FdAEwSwskQ==,type:str]
-        ACCOUNT_AUTH0_LOGOUT_URL:
-            _default: ENC[AES256_GCM,data:FpIq9cXpqmBXpmVBj9seZB7vpbuJ5q+Iz5ChgL7+g6dgosufrO93tl4wsQk=,iv:DM4qKBrIyeQOmMMSPhEKiW26kEL0yHVA58na8tXZX0o=,tag:kTEy1KUinGUfe/cq1UARQA==,type:str]
         ACCOUNT_SENDGRID_API_KEY:
             _default: ENC[AES256_GCM,data:i08k9qiHA/31nyAri5pIm8MqCUZXLWjvQgcYpAyrcsToszt/L+QsYVcdCEerI0udtd2gJvLuRz3k8GcpZ9OfQB2Y0kJn,iv:Pt3rg7GjhfDw5S4VV9HpLSDsO4AhXlGIsNhdc5rYqCQ=,tag:zL/bLVgSS41kgnv69GxLMg==,type:str]
         ACCOUNT_SENDGRID_SENDER:
@@ -50,8 +48,6 @@ blockscout:
             _default: ENC[AES256_GCM,data:fHIsaJQY6YrvoJKFDFZlBuunFD6QKYdUUOoW+aLV/44VCsWhrXbMUQ==,iv:teJEbP6pVC4WHeJwptf/DfRbp5Y8x/0OExTfClfLPyU=,tag:5nkNFZcJEFg5v0br2JUpnA==,type:str]
         RE_CAPTCHA_CLIENT_KEY:
             _default: ENC[AES256_GCM,data:ROEBG5XrOwAofN2ZnFnwekuqvHjDFu1Dp5V20Ud9gvqV1xc324InYA==,iv:EubA1HilDAtNaqdpTbFWaWSAf8kCiWgStada1dKpOD8=,tag:ry4796qJAekQKlz4sWGQKQ==,type:str]
-        INDEXER_OPTIMISM_RPC_L1:
-            _default: ENC[AES256_GCM,data:y93o/DxAWlQKSu5NTStN9czzoQdy4Fo/Dg==,iv:LgVC0FQ/IEs3x876p6s47FaXbdxNuDOzUdoAOjnWzpU=,tag:A68lXRAZFZ5N3HNwppqV1A==,type:str]
 scVerifier:
     environment:
         SMART_CONTRACT_VERIFIER__SOLIDITY__FETCHER__S3__ACCESS_KEY:
@@ -92,8 +88,8 @@ sops:
     azure_kv: []
     hc_vault: []
     age: []
-    lastmodified: "2023-03-01T17:32:26Z"
-    mac: ENC[AES256_GCM,data:X1CPQWSFgieHg/elCyqPqQekMYsK/Go4R4sOsNE4XACseUzQr725vlo7XqZqPmRnnXz5bJu6MZAjSTbGCrPzybZV7ZUv94j9uPQSWH4x9SJicNe9ZHApeWapb/+PDz6xO9k8Tdug8WgVgy5kilHdYi6uGoIgeAwC7RwNG7TfyeQ=,iv:MpGf7GkzmVw5MZn0IMCDBAg0WQO1mzDc2ptHUxQNHUk=,tag:hsHMaU4MMc7df6Twc8dqSQ==,type:str]
+    lastmodified: "2023-04-27T16:27:47Z"
+    mac: ENC[AES256_GCM,data:TUIxPt/HMLzkWlPdBcM2mKGlNU+6ob+EWvtfKWAHZaVhH2qwoi+HI+Ncx+j3H9/MR6q9Uhhr611s8rCF0LdwbsK+LGdOBBql+45vfmCE1XRl/DS0LFdZxkZn4ub49C9Uf8g0DOVt02NJQNh3ZNaBa+l2nIirh643hLvzFCCqBM8=,iv:tqRFfzSk0W+NzEADzIWy08aUnpJgcIPBHhUhM0Kf+VA=,tag:0IiapCTs0UITa38cwVyZqQ==,type:str]
     pgp:
         - created_at: "2022-09-22T09:52:10Z"
           enc: |

deploy/values/l2-optimism-goerli/values.yaml

@@ -113,8 +113,6 @@ blockscout:
       _default: '4677000'
     DISABLE_REALTIME_INDEXER:
       _default: 'false'
-    INDEXER_OPTIMISM_L1_RPC:
-      _default: http://65.108.226.29:8545
     INDEXER_OPTIMISM_L1_PORTAL_CONTRACT:
       _default: 0x5b47E1A08Ea6d985D6649300584e6722Ec4B1383
     INDEXER_OPTIMISM_L1_WITHDRAWALS_START_BLOCK:
@@ -279,7 +277,7 @@ frontend:
   app: blockscout
   enabled: true
   image:
-    _default: ghcr.io/blockscout/frontend:main
+    _default: ghcr.io/blockscout/frontend:v1.0.8
   ingress:
     enabled: true
     # annotations:
@@ -393,6 +391,10 @@ frontend:
       _default: ''
     NEXT_PUBLIC_NETWORK_RPC_URL:
       _default: https://goerli.optimism.io
+    NEXT_PUBLIC_WEB3_DEFAULT_WALLET:
+      _default: coinbase
+    NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET:
+      _default: true
     NEXT_PUBLIC_HOMEPAGE_CHARTS:
       _default: "['daily_txs']"
     NEXT_PUBLIC_IS_TESTNET:

deploy/values/main/secrets.yaml

 blockscout:
     environment:
+        ETHEREUM_JSONRPC_TRACE_URL:
+            #ENC[AES256_GCM,data:Lh7FyFwnnbk8Lpo3e5XunDK2iRyXsFtUOyF49/eoww==,iv:rTfCtp+xZkWtYewH77Xqx5lTAbfS2Xr/bIcMeETieKw=,tag:cviW/zIbNzpZ2ReFIxLxxw==,type:comment]
+            _default: ENC[AES256_GCM,data:hzvsDY9ff0zagkoZsuqdPa7ePPe0Td+wlg==,iv:dfiFF+vjPzPLJz7oWe0ahEjFlhc+/SC4vubE9DssRMk=,tag:5wW63FHQa6HCiA8jAxO71w==,type:str]
+        ETHEREUM_JSONRPC_HTTP_URL:
+            #ENC[AES256_GCM,data:Q5ZCHA/BJ+uTdiNyXF9m2Awa+wjkBWca01QusH2Tvw==,iv:JscgpCcF9IbOr2TOGE3D6GrQCmnKxyPoH2hdoC+NYR4=,tag:AFUqdNTheLggMRx6DzotMg==,type:comment]
+            _default: ENC[AES256_GCM,data:yGFoleqbrSeu8VOQsczabh8AZH0BZJiNvw==,iv:ViStcIKLzBVjUIMp53sg+aylQ/4Cyh8/E/UwPfpoZCo=,tag:MXKebydM5XOhy/INqYJhww==,type:str]
+        #ENC[AES256_GCM,data:xhwTQI1yVw7fJPeMPIwjwUkkwgb9LBQfJw==,iv:CAW4UNSA1SVhLsPkN2T+FVtGPD/5ayJz8afzePTcYr8=,tag:eWbOvyG6rb+RkHTxxSbzmA==,type:comment]
+        #ENC[AES256_GCM,data:EyiYQwB5sVt/gv+Wchv3Ty7Xzt44NuYtOfaPuxUOsNB8,iv:C5zDeLnhFLo/D+78k9GV9l/Ehr53Wpo2a+q/98rARoU=,tag:TTdqnUmhOLP4YCyVZ5TIVg==,type:comment]
+        #ENC[AES256_GCM,data:f0ESzURFheRh+DqaqiGNXwVyBnSTsTDAwhbZ7TFZnSzqnvMRzZthkZvDW6nSM5d23asAeYuXwRY=,iv:HYyVReU8eedUxnSQ3YPEBnohq6a5L+ef3HIm132aqjs=,tag:tpQ272l070s+KbTQ4v0xww==,type:comment]
         ACCOUNT_USERNAME:
             _default: ENC[AES256_GCM,data:xJ0hxcuU8u+QwiXciZ8qe1sV1GuxZV8Z9iYgnoWCu0ueuEmNE80jwe+vqviNb/UbOQs=,iv:uRNP5RTG/oxUngEoBbvLg9GzS5gYiHlL42yttgYWPAc=,tag:plQfCpG9pN7d28ooZ3aHrQ==,type:str]
         ACCOUNT_PASSWORD:
@@ -24,6 +33,8 @@ blockscout:
             _default: ENC[AES256_GCM,data:Cqga1O4fbdtx5GfEQjJEPYWqeig7SBAdKiIif9sGCNrdy5FSHr43uskfdOdiS3uhaHm925jhPf+/nvs7VRzaqSAJCB2HBrVjJLOTQItVEw5rGus9Ma2plubDdrXh2CHO14mjE6f1/QOq2MLC1S79MqeHxpgqS0sgMflKopWa3/4=,iv:z1mBiInLa3kutmPFuX+R96rUSGcjFr/UH6cn/UbM0tg=,tag:8TRBcnTENdguj2BOs4Qrmw==,type:str]
         DATABASE_URL:
             _default: ENC[AES256_GCM,data:r5JQJH+pq4zwo9ceFP4I8inttRFFxKKaw9+l9hDqeDMcEIPljAfJxvSF3noVlyfNtqO0ru+3GaTumDamdb9Hw2Y=,iv:OwCvrIgXpxVMI5QQfT7ZDGcsXBdzIcuv0wUSxtwkYrM=,tag:o0GFp3F+jTxw8Hg4Ce/IpQ==,type:str]
+        API_SENSITIVE_ENDPOINTS_KEY:
+            _default: ENC[AES256_GCM,data:cghX4B0yt18xT8kd/buPd6L/zLo/jIZzyVSDPoDGHiDMXoQRxHuHtITQbCjD+w0UdFZqDvDvAC6VUc5veCfITw==,iv:h9iTyEEhxSmStgA8ycncELR1A6AcWezk+zYIyo5Fe/Q=,tag:cC/ye9+Z9MvNR3h5o7JBJg==,type:str]
         ACCOUNT_DATABASE_URL:
             _default: ENC[AES256_GCM,data:HF5y8ezV5TiLqeh98WDp4rXQeUfSBETyWVHOyNZNy5pt4MdiKTdFBLauOJpD6YHWynMFsd8IJLRNLrBn4qGe3RfwprR6v3WN9Q==,iv:B9AJXO7EJexsPgDHb5s5tzpadVYoZ79fyaL8NOYXSEw=,tag:lyNKQ13Q+pn+3DrAXIzIKQ==,type:str]
         ACCOUNT_REDIS_URL:
@@ -33,7 +44,7 @@ blockscout:
         ACCOUNT_AUTH0_CLIENT_ID:
             _default: ENC[AES256_GCM,data:xasZDDg1IuGbKSTm9Opjh43RcqDSzE3dMdmynP0gejo=,iv:TTRqPOkwMxAQIpmc7DklBoPdZzn3FsAprxwXtHY/KSk=,tag:ZI7zQ5zyjjYOqjzy2DyY7Q==,type:str]
         ACCOUNT_AUTH0_CLIENT_SECRET:
-            _default: ENC[AES256_GCM,data:jr/MLQ1Rq1xjBVAb/fZFbvak23hEcmRkh5nnG4WNCcORR+xEWhEv7ncP87ClpsfxedDN5pOcFrdUkF7u80OkKA==,iv:TIxP5v9K7mcApYmSKRByKNPwYw0djRWHojYfHvSWqZM=,tag:LSLmwapH044CEzOvlce9Og==,type:str]
+            _default: ENC[AES256_GCM,data:iYnptgxESZs216/m0ArCciXfirPTxVjt5urKTATyYv3uadokC54ofzMZagG/ZVvNY48+Uxh4YGzwySyLOOM0SA==,iv:UQoZf3tesEjAJ7E5YruoZmVclsYfS5EmSo4z90wfHfE=,tag:er+hARrkCrjoQugqvRr4ow==,type:str]
         ACCOUNT_AUTH0_CALLBACK_URL:
             _default: ENC[AES256_GCM,data:GhyNTVlRvDpfW6swKExjVy65I3S+q6ITJWH8xp5TXuudp7hAtI4ujkYmXaa7D1BCaineTLhQ8UgHXFAgodOlrsGP1g41LIh6T2SGhrXTGGLbFw==,iv:ZflinC/h35jkrVAx0x7Z7U9mRridl85f7f6nfoc0Xts=,tag:40zL2KM9uPg/lRYv5JMxqw==,type:str]
         ACCOUNT_AUTH0_LOGOUT_RETURN_URL:
@@ -144,8 +155,8 @@ sops:
     azure_kv: []
     hc_vault: []
     age: []
-    lastmodified: "2023-04-18T09:26:42Z"
-    mac: ENC[AES256_GCM,data:4MdP3Fi3SDxyXjhyI7jogYdigziLkp7oh4M6BthtT2FuUu+XAGnONAdccxULJfXtKS6ue27BtV/pKWhdKeOqKIN23BJERqa4cFgYlyd85XAyL400/fEKEO4nCe2c9VIqNRUQls28/WkRjzRjvzQMMTIRIAJvfrJUYRpIabXWqAo=,iv:Z4shgbH8uJNuoJvmyyQjQ+fZsXuSC3nIGYb6GYO/nac=,tag:IDZvpGiZH41IwAgSidF3xQ==,type:str]
+    lastmodified: "2023-05-09T16:11:07Z"
+    mac: ENC[AES256_GCM,data:JHnHHGNOw84O5No7UDTLSGnLwUJHUUZaY/UBPetpa99OFDMlzFvEnjIh4DjIqhVLXR5DBZJr7BTibQLyo6y/aXlWKDxHvLklLGunKQaQ1Xl/JzDKRTYlAs/JsJRR0ElzzyPmbCKbSJOX0tAtNAuhH6EFKYg+HLYmPHtYcvM1Kck=,iv:OsKv7efW0xJ4ZT/38Uyq0feqVC4i2x4srzG+mqd2Avg=,tag:MWfjO8r3iJSMGluqIHc9jA==,type:str]
     pgp:
         - created_at: "2022-09-14T13:42:28Z"
           enc: |

deploy/values/main/values.yaml

@@ -63,15 +63,6 @@ blockscout:
         app: blockscout-prod
   # Blockscout environment variables
   environment:
-    ETHEREUM_JSONRPC_TRACE_URL:
-      # _default: http://geth-svc:8545
-      _default: http://65.108.226.29:8545
-    ETHEREUM_JSONRPC_HTTP_URL:
-      # _default: http://geth-svc:8545
-      _default: http://65.108.226.29:8545
-    # ETHEREUM_JSONRPC_WS_URL:
-    #   # _default: ws://geth-svc:8546
-    #   _default: ws://geth-svc.goerli.svc.cluster.local:8546
     BLOCKSCOUT_VERSION:
       _default: v5.1.2-beta
     ECTO_USE_SSL:

deploy/values/review-l2/values.yaml

@@ -119,6 +119,10 @@ frontend:
       _default: ''
     NEXT_PUBLIC_NETWORK_RPC_URL:
       _default: https://goerli.optimism.io
+    NEXT_PUBLIC_WEB3_DEFAULT_WALLET:
+      _default: coinbase
+    NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET:
+      _default: true
     NEXT_PUBLIC_HOMEPAGE_CHARTS:
       _default: "['daily_txs']"
     NEXT_PUBLIC_IS_TESTNET:

docs/ENVS.md

@@ -42,14 +42,16 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_LOGOUT_URL | `string` | Account logout url. Required if account is supported for the app instance. | - | - | `https://blockscoutcom.us.auth0.com/v2/logout` |
 | NEXT_PUBLIC_LOGOUT_RETURN_URL | `string` | Account logout return url. Required if account is supported for the app instance. | - | - | `https://blockscout.com/poa/core/auth/logout` |
 | NEXT_PUBLIC_HOMEPAGE_CHARTS | `Array<'daily_txs' \| 'coin_price' \| 'market_cup'>` | List of charts displayed on the home page | - | - | `['daily_txs','coin_price','market_cup']` |
-| NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR | `string` | Text color of the hero plate on the homepage | `#FFFFFF` | `'#DCFE76'` |
-| NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT | `string` | Gradient value for hero plate on the homepage | - | `radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%)` | `radial-gradient(at 15% 86%, hsla(350,65%,70%,1) 0px, transparent 50%), radial-gradient(at 72% 57%, hsla(14,95%,76%,1) 0px, transparent 50%)` |
+| NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR | `string` | Text color of the hero plate on the homepage (escape "#" symbol if you use HEX color codes) | `\#FFFFFF \| rgb(220, 254, 118)` | `\#DCFE76` |
+| NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT | `string` | Gradient value for hero plate on the homepage (escape "#" symbol if you use HEX color codes) | - | `radial-gradient(103.03% 103.03% at 0% 0%, rgba(183, 148, 244, 0.8) 0%, rgba(0, 163, 196, 0.8) 100%)` | `radial-gradient(at 15% 86%, hsla(350,65%,70%,1) 0px, transparent 50%), radial-gradient(at 72% 57%, hsla(14,95%,76%,1) 0px, transparent 50%)` |
 | NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER | `boolean` | Set to false if network doesn't have gas tracker | - | `true` | `false` |
 | 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_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` |
+| NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET | `boolean`| Set to `true` to hide icon "Add to your wallet" next to token addresses | - | `false` | `true` |
 
 ### Marketplace app configuration properties
 
@@ -93,6 +95,7 @@ For each application, you need to specify the `MarketplaceCategoryId` to which i
 | group | `Mainnets \| Testnets \| Other` | Indicates in which tab network appears in the menu | yes | - | `Mainnets` |
 | icon | `string` | Network icon; if not provided, the common placeholder will be shown; *Note* that icon size should be at least 60px by 60px | - | - | `https://placekitten.com/60/60` |
 | isActive | `boolean` | Pass `true` if item should be shonw as active in the menu | - | - | `true` |
+| invertIconInDarkMode | `boolean` | Pass `true` if icon colors should be inverted in dark mode | - | - | `true` |
 
 ### Network explorer configuration properties
 
@@ -119,8 +122,10 @@ For each application, you need to specify the `MarketplaceCategoryId` to which i
 
 | Variable | Type| Description | Is required  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_API_PROTOCOL | `http \| https` | Main API protocol | - | `https` | `http` |
 | NEXT_PUBLIC_API_HOST | `string` | Main API host | - | `blockscout.com` | `my-host.com` |
 | NEXT_PUBLIC_API_BASE_PATH | `string` | Base path for Main API endpoint url | - | - | `/poa/core` |
+| NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL | `ws \| wss` | Main API websocket protocol | - | `wss` | `ws` |
 | NEXT_PUBLIC_STATS_API_HOST | `string` | Stats API endpoint url | - | - | `https://my-host.com` |
 | NEXT_PUBLIC_VISUALIZE_API_HOST | `string` | Visualize API endpoint url | - | - | `https://my-host.com` |
 | NEXT_PUBLIC_CONTRACT_INFO_API_HOST | `string` | Contract Info API endpoint url | - | - | `https://my-host.com` |
@@ -147,6 +152,15 @@ For each application, you need to specify the `MarketplaceCategoryId` to which i
 | NEXT_PUBLIC_L1_BASE_URL | `string` | Base Blockscout URL for L1 network | yes | - | `'http://eth-goerli.blockscout.com'` |
 | NEXT_PUBLIC_L2_WITHDRAWAL_URL | `string` | URL for L2 -> L1 withdrawals | yes | - | `https://app.optimism.io/bridge/withdraw` |
 
+## Beacon chain configuration
+
+| Variable | Type| Description | Is required  | Default value | Example value |
+| --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_HAS_BEACON_CHAIN | `boolean` | Set to true for networks with the beacon chain | - | - | `true` |
+
+
+
+
 # How to add new environment variable
 
 If the variable should be exposed to the browser don't forget to add prefix `NEXT_PUBLIC_` to its name.

global.d.ts

-import type { MetaMaskInpageProvider } from '@metamask/providers';
+import type { ExternalProvider } from 'types/client/wallets';
 
 type CPreferences = {
   zone: string;
@@ -7,8 +7,10 @@ type CPreferences = {
 }
 
 declare global {
-  interface Window {
-    ethereum: MetaMaskInpageProvider;
+  export interface Window {
+    ethereum?: {
+      providers?: Array<ExternalProvider>;
+    };
     coinzilla_display: Array<CPreferences>;
   }
 }

icons/delete.svg

-<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 20">
-  <path d="M15.645 19.375h-10A1.875 1.875 0 0 1 3.77 17.5V5.625a.625.625 0 0 1 1.25 0V17.5a.625.625 0 0 0 .625.625h10a.625.625 0 0 0 .625-.625V5.625a.625.625 0 0 1 1.25 0V17.5a1.875 1.875 0 0 1-1.875 1.875Zm2.5-15h-15a.625.625 0 0 1 0-1.25h15a.625.625 0 1 1 0 1.25Z"/>
-  <path d="M13.145 4.375a.625.625 0 0 1-.625-.625V1.875H8.77V3.75a.625.625 0 0 1-1.25 0v-2.5a.625.625 0 0 1 .625-.625h5a.625.625 0 0 1 .625.625v2.5a.625.625 0 0 1-.625.625Zm-2.5 11.875a.625.625 0 0 1-.625-.625v-8.75a.625.625 0 0 1 1.25 0v8.75a.625.625 0 0 1-.625.625ZM13.77 15a.625.625 0 0 1-.625-.625v-6.25a.625.625 0 0 1 1.25 0v6.25a.625.625 0 0 1-.625.625Zm-6.25 0a.625.625 0 0 1-.625-.625v-6.25a.625.625 0 0 1 1.25 0v6.25A.625.625 0 0 1 7.52 15Z"/>
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15 19.375H5A1.875 1.875 0 0 1 3.125 17.5V5.625a.625.625 0 0 1 1.25 0V17.5a.625.625 0 0 0 .625.625h10a.624.624 0 0 0 .625-.625V5.625a.625.625 0 1 1 1.25 0V17.5A1.875 1.875 0 0 1 15 19.375Zm2.5-15h-15a.625.625 0 0 1 0-1.25h15a.625.625 0 1 1 0 1.25Z" fill="currentColor"/>
+  <path d="M12.5 4.375a.625.625 0 0 1-.625-.625V1.875h-3.75V3.75a.625.625 0 0 1-1.25 0v-2.5A.625.625 0 0 1 7.5.625h5a.625.625 0 0 1 .625.625v2.5a.625.625 0 0 1-.625.625ZM10 16.25a.625.625 0 0 1-.625-.625v-8.75a.625.625 0 0 1 1.25 0v8.75a.624.624 0 0 1-.625.625ZM13.125 15a.624.624 0 0 1-.625-.625v-6.25a.625.625 0 1 1 1.25 0v6.25a.624.624 0 0 1-.625.625Zm-6.25 0a.625.625 0 0 1-.625-.625v-6.25a.625.625 0 0 1 1.25 0v6.25a.625.625 0 0 1-.625.625Z" fill="currentColor"/>
 </svg>

icons/edit.svg

-<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-  <path d="M19.433 3.6 16.399.569A1.926 1.926 0 0 0 15.03 0c-.518 0-1.005.202-1.37.568L.961 13.264a.779.779 0 0 0-.221.446l-.734 5.406a.78.78 0 0 0 .877.877l5.406-.734a.78.78 0 0 0 .446-.221L19.433 6.342c.366-.366.567-.853.567-1.37 0-.518-.201-1.005-.567-1.371ZM5.82 17.75l-4.131.561.56-4.131 8.997-8.997 3.571 3.57L5.82 17.75ZM18.33 5.24l-2.41 2.412-3.57-3.57 2.411-2.413a.379.379 0 0 1 .538 0l3.033 3.033a.379.379 0 0 1 0 .538Z"/>
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M19.432 3.6 16.4.569A1.925 1.925 0 0 0 15.03 0c-.518 0-1.005.202-1.371.568L.962 13.264a.779.779 0 0 0-.221.446l-.734 5.406a.779.779 0 0 0 .877.877l5.406-.734a.778.778 0 0 0 .446-.221L19.432 6.342c.366-.366.568-.853.568-1.37 0-.518-.202-1.005-.568-1.371ZM5.82 17.75l-4.132.561.561-4.131 8.997-8.997 3.57 3.57L5.82 17.75ZM18.33 5.24l-2.41 2.412-3.571-3.57L14.76 1.67a.379.379 0 0 1 .537 0l3.034 3.032a.378.378 0 0 1 0 .538Z" fill="currentColor"/>
 </svg>

icons/wallets/coinbase.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2500 2500">
+  <rect fill="none"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="#0052FF" d="M520.7 0h1458.5C2266.9 0 2500 250.8 2500 560.2v1379.6c0 309.4-233.1 560.2-520.7 560.2H520.7C233.1 2500 0 2249.2 0 1939.8V560.2C0 250.8 233.1 0 520.7 0z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M1250 362.1c490.4 0 887.9 397.5 887.9 887.9s-397.5 887.9-887.9 887.9-887.9-397.5-887.9-887.9S759.6 362.1 1250 362.1z"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="#0052FF" d="M1031.3 966.2h437.3c36 0 65.1 31.4 65.1 70v427.5c0 38.7-29.2 70-65.1 70h-437.3c-36 0-65.1-31.4-65.1-70v-427.5c0-38.6 29.2-70 65.1-70z"/>
+</svg>

lib/api/resources.ts

@@ -23,9 +23,10 @@ import type {
   AddressTokenTransferFilters,
   AddressTokensFilter,
   AddressTokensResponse,
+  AddressWithdrawalsResponse,
 } from 'types/api/address';
 import type { AddressesResponse } from 'types/api/addresses';
-import type { BlocksResponse, BlockTransactionsResponse, Block, BlockFilters } from 'types/api/block';
+import type { BlocksResponse, BlockTransactionsResponse, Block, BlockFilters, BlockWithdrawalsResponse } from 'types/api/block';
 import type { ChartMarketResponse, ChartTransactionResponse } from 'types/api/charts';
 import type { SmartContract, SmartContractReadMethod, SmartContractWriteMethod, SmartContractVerificationConfig } from 'types/api/contract';
 import type { VerifiedContractsResponse, VerifiedContractsFilters, VerifiedContractsCounters } from 'types/api/contracts';
@@ -54,6 +55,7 @@ import type { TransactionsResponseValidated, TransactionsResponsePending, Transa
 import type { TTxsFilters } from 'types/api/txsFilters';
 import type { TxStateChanges } from 'types/api/txStateChanges';
 import type { VisualizedContract } from 'types/api/visualization';
+import type { WithdrawalsResponse } from 'types/api/withdrawals';
 import type { ArrayElement } from 'types/utils';
 
 import appConfig from 'configs/app/config';
@@ -168,6 +170,12 @@ export const RESOURCES = {
     paginationFields: [ 'block_number' as const, 'items_count' as const, 'index' as const ],
     filterFields: [],
   },
+  block_withdrawals: {
+    path: '/api/v2/blocks/:height/withdrawals',
+    pathParams: [ 'height' as const ],
+    paginationFields: [ 'items_count' as const, 'index' as const ],
+    filterFields: [],
+  },
   txs_validated: {
     path: '/api/v2/transactions',
     paginationFields: [ 'block_number' as const, 'items_count' as const, 'filter' as const, 'index' as const ],
@@ -208,6 +216,11 @@ export const RESOURCES = {
     path: '/api/v2/transactions/:hash/state-changes',
     pathParams: [ 'hash' as const ],
   },
+  withdrawals: {
+    path: '/api/v2/withdrawals',
+    paginationFields: [ 'index' as const, 'items_count' as const ],
+    filterFields: [],
+  },
 
   // ADDRESSES
   addresses: {
@@ -275,6 +288,12 @@ export const RESOURCES = {
     paginationFields: [ 'items_count' as const, 'token_name' as const, 'token_type' as const, 'value' as const ],
     filterFields: [ 'type' as const ],
   },
+  address_withdrawals: {
+    path: '/api/v2/addresses/:hash/withdrawals',
+    pathParams: [ 'hash' as const ],
+    paginationFields: [ 'items_count' as const, 'index' as const ],
+    filterFields: [],
+  },
 
   // CONTRACT
   contract: {
@@ -372,6 +391,12 @@ export const RESOURCES = {
     paginationFields: [ 'block_number' as const, 'items_count' as const, 'index' as const, 'token_id' as const ],
     filterFields: [],
   },
+  token_instance_holders: {
+    path: '/api/v2/tokens/:hash/instances/:id/holders',
+    pathParams: [ 'hash' as const, 'id' as const ],
+    paginationFields: [ 'items_count' as const, 'token_id' as const, 'value' as const ],
+    filterFields: [],
+  },
 
   // HOMEPAGE
   homepage_stats: {
@@ -519,9 +544,10 @@ export type PaginatedResources = 'blocks' | 'block_txs' |
 'search' |
 'address_logs' | 'address_tokens' |
 'token_transfers' | 'token_holders' | 'token_inventory' | 'tokens' |
-'token_instance_transfers' |
+'token_instance_transfers' | 'token_instance_holders' |
 'verified_contracts' |
-'l2_output_roots' | 'l2_withdrawals' | 'l2_txn_batches' | 'l2_deposits';
+'l2_output_roots' | 'l2_withdrawals' | 'l2_txn_batches' | 'l2_deposits' |
+'withdrawals' | 'address_withdrawals' | 'block_withdrawals';
 
 export type PaginatedResponse<Q extends PaginatedResources> = ResourcePayload<Q>;
 
@@ -550,6 +576,7 @@ Q extends 'stats_line' ? StatsChart :
 Q extends 'blocks' ? BlocksResponse :
 Q extends 'block' ? Block :
 Q extends 'block_txs' ? BlockTransactionsResponse :
+Q extends 'block_withdrawals' ? BlockWithdrawalsResponse :
 Q extends 'txs_validated' ? TransactionsResponseValidated :
 Q extends 'txs_pending' ? TransactionsResponsePending :
 Q extends 'tx' ? Transaction :
@@ -569,6 +596,7 @@ Q extends 'address_coin_balance' ? AddressCoinBalanceHistoryResponse :
 Q extends 'address_coin_balance_chart' ? AddressCoinBalanceHistoryChart :
 Q extends 'address_logs' ? LogsResponseAddress :
 Q extends 'address_tokens' ? AddressTokensResponse :
+Q extends 'address_withdrawals' ? AddressWithdrawalsResponse :
 Q extends 'token' ? TokenInfo :
 Q extends 'token_verified_info' ? TokenVerifiedInfo :
 Q extends 'token_counters' ? TokenCounters :
@@ -577,6 +605,7 @@ Q extends 'token_holders' ? TokenHolders :
 Q extends 'token_instance' ? TokenInstance :
 Q extends 'token_instance_transfers_count' ? TokenInstanceTransfersCount :
 Q extends 'token_instance_transfers' ? TokenInstanceTransferResponse :
+Q extends 'token_instance_holders' ? TokenHolders :
 Q extends 'token_inventory' ? TokenInventoryResponse :
 Q extends 'tokens' ? TokensResponse :
 Q extends 'search' ? SearchResult :
@@ -590,6 +619,7 @@ Q extends 'verified_contracts' ? VerifiedContractsResponse :
 Q extends 'verified_contracts_counters' ? VerifiedContractsCounters :
 Q extends 'visualize_sol2uml' ? VisualizedContract :
 Q extends 'contract_verification_config' ? SmartContractVerificationConfig :
+Q extends 'withdrawals' ? WithdrawalsResponse :
 Q extends 'l2_output_roots' ? L2OutputRootsResponse :
 Q extends 'l2_withdrawals' ? L2WithdrawalsResponse :
 Q extends 'l2_deposits' ? L2DepositsResponse :

lib/csp/generateCspPolicy.ts

@@ -5,6 +5,7 @@ function generateCspPolicy() {
   const policyDescriptor = mergeDescriptors(
     descriptors.app(),
     descriptors.ad(),
+    descriptors.cloudFlare(),
     descriptors.googleAnalytics(),
     descriptors.googleFonts(),
     descriptors.googleReCaptcha(),

lib/csp/policies/cloudFlare.ts

+import type CspDev from 'csp-dev';
+
+import { KEY_WORDS } from '../utils';
+
+// CloudFlare analytics
+export function cloudFlare(): CspDev.DirectiveDescriptor {
+  return {
+    'script-src': [
+      'static.cloudflareinsights.com',
+    ],
+    'style-src': [
+      KEY_WORDS.DATA,
+    ],
+  };
+}

lib/csp/policies/index.ts

 export { ad } from './ad';
 export { app } from './app';
+export { cloudFlare } from './cloudFlare';
 export { googleAnalytics } from './googleAnalytics';
 export { googleFonts } from './googleFonts';
 export { googleReCaptcha } from './googleReCaptcha';

lib/hooks/useNavItems.tsx

@@ -125,7 +125,14 @@ export default function useNavItems(): ReturnType {
         blocks,
         topAccounts,
         verifiedContracts,
-      ];
+        appConfig.beaconChain.hasBeaconChain && {
+          text: 'Withdrawals',
+          nextRoute: { pathname: '/withdrawals' as const },
+          icon: withdrawalsIcon,
+          isActive: pathname === '/withdrawals',
+          isNewUi: true,
+        },
+      ].filter(Boolean);
     }
 
     const otherNavItems: Array<NavItem> = [

lib/next/getServerSidePropsBeacon.ts

+import type { GetServerSideProps } from 'next';
+
+import appConfig from 'configs/app/config';
+import type { Props } from 'lib/next/getServerSideProps';
+import { getServerSideProps as getServerSidePropsBase } from 'lib/next/getServerSideProps';
+
+export const getServerSideProps: GetServerSideProps<Props> = async(args) => {
+  if (!appConfig.beaconChain.hasBeaconChain) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return getServerSidePropsBase(args);
+};

lib/web3/useProvider.tsx

+import React from 'react';
+
+import type { ExternalProvider } from 'types/client/wallets';
+
+import appConfig from 'configs/app/config';
+
+export default function useProvider() {
+  const [ provider, setProvider ] = React.useState<ExternalProvider>();
+
+  React.useEffect(() => {
+    if (!('ethereum' in window)) {
+      return;
+    }
+
+    window.ethereum?.providers?.forEach(async(provider) => {
+      if (appConfig.web3.defaultWallet === 'coinbase' && provider.isCoinbaseWallet) {
+        return setProvider(provider);
+      }
+
+      if (appConfig.web3.defaultWallet === 'metamask' && provider.isMetaMask) {
+        return setProvider(provider);
+      }
+    });
+  }, []);
+
+  return provider;
+}

lib/web3/wallets.ts

+import type { WalletType, WalletInfo } from 'types/client/wallets';
+
+import coinbaseIcon from 'icons/wallets/coinbase.svg';
+import metamaskIcon from 'icons/wallets/metamask.svg';
+
+export const WALLETS_INFO: Record<WalletType, WalletInfo> = {
+  metamask: {
+    add_token_text: 'Add token to MetaMask',
+    add_network_text: 'Add network to MetaMask',
+    icon: metamaskIcon,
+  },
+  coinbase: {
+    add_token_text: 'Add token to Coinbase Wallet',
+    add_network_text: 'Add network to Coinbase Wallet',
+    icon: coinbaseIcon,
+  },
+};

middleware.ts

@@ -30,6 +30,8 @@ export function middleware(req: NextRequest) {
   const res = NextResponse.next();
   res.headers.append('Content-Security-Policy', cspPolicy);
   res.headers.append('Server-Timing', `middleware;dur=${ end - start }`);
+  // eslint-disable-next-line no-restricted-properties
+  res.headers.append('Docker-ID', process.env.HOSTNAME || '');
 
   return res;
 }

mocks/tokens/tokenInstance.ts

@@ -179,3 +179,8 @@ export const withRichMetadata: TokenInstance = {
     status: null,
   },
 };
+
+export const unique: TokenInstance = {
+  ...base,
+  is_unique: true,
+};

mocks/withdrawals/withdrawals.ts

+export const data = {
+  items: [
+    {
+      amount: '192175',
+      block_number: 43242,
+      index: 11688,
+      receiver: {
+        hash: '0xf97e180c050e5Ab072211Ad2C213Eb5AEE4DF134',
+        implementation_name: null,
+        is_contract: false,
+        is_verified: null,
+        name: null,
+      },
+      timestamp: '2022-06-07T18:12:24.000000Z',
+      validator_index: 49622,
+    },
+    {
+      amount: '192175',
+      block_number: 43242,
+      index: 11687,
+      receiver: {
+        hash: '0xf97e987c050e5Ab072211Ad2C213Eb5AEE4DF134',
+        implementation_name: null,
+        is_contract: false,
+        is_verified: null,
+        name: null,
+      },
+      timestamp: '2022-05-07T18:12:24.000000Z',
+      validator_index: 49621,
+    },
+    {
+      amount: '182773',
+      block_number: 43242,
+      index: 11686,
+      receiver: {
+        hash: '0xf97e123c050e5Ab072211Ad2C213Eb5AEE4DF134',
+        implementation_name: null,
+        is_contract: false,
+        is_verified: null,
+        name: null,
+      },
+      timestamp: '2022-04-07T18:12:24.000000Z',
+      validator_index: 49620,
+    },
+  ],
+  next_page_params: {
+    index: 11639,
+    items_count: 50,
+  },
+};

pages/token/[hash]/index.tsx

 import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import React from 'react';
 
 import type { PageParams } from 'lib/next/token/types';
 
 import getSeo from 'lib/next/token/getSeo';
-import Token from 'ui/pages/Token';
+import Page from 'ui/shared/Page/Page';
+
+const Token = dynamic(() => import('ui/pages/Token'), { ssr: false });
 
 const TokenPage: NextPage<PageParams> = ({ hash }: PageParams) => {
   const { title, description } = getSeo({ hash });
@@ -16,7 +19,9 @@ const TokenPage: NextPage<PageParams> = ({ hash }: PageParams) => {
         <title>{ title }</title>
         <meta name="description" content={ description }/>
       </Head>
-      <Token/>
+      <Page>
+        <Token/>
+      </Page>
     </>
   );
 };

pages/withdrawals.tsx

+import type { NextPage } from 'next';
+import Head from 'next/head';
+import React from 'react';
+
+import getNetworkTitle from 'lib/networks/getNetworkTitle';
+import Withdrawals from 'ui/pages/Withdrawals';
+
+const WithdrawalsPage: NextPage = () => {
+  const title = getNetworkTitle();
+  return (
+    <>
+      <Head>
+        <title>{ title }</title>
+      </Head>
+      <Withdrawals/>
+    </>
+  );
+};
+
+export default WithdrawalsPage;
+
+export { getServerSideProps } from 'lib/next/getServerSidePropsBeacon';

stubs/account.ts

+import { ADDRESS_PARAMS, ADDRESS_HASH } from './addressParams';
+
+export const PRIVATE_TAG_ADDRESS = {
+  address: ADDRESS_PARAMS,
+  address_hash: ADDRESS_HASH,
+  id: '4',
+  name: 'placeholder',
+};

stubs/address.ts

+import type { Address } from 'types/api/address';
+
+import { ADDRESS_HASH } from './addressParams';
+import { TOKEN_INFO_ERC_20 } from './token';
+
+export const ADDRESS_INFO: Address = {
+  block_number_balance_updated_at: 8774377,
+  coin_balance: '0',
+  creation_tx_hash: null,
+  creator_address_hash: null,
+  exchange_rate: null,
+  has_custom_methods_read: false,
+  has_custom_methods_write: false,
+  has_decompiled_code: false,
+  has_logs: true,
+  has_methods_read: false,
+  has_methods_read_proxy: false,
+  has_methods_write: false,
+  has_methods_write_proxy: false,
+  has_token_transfers: false,
+  has_tokens: false,
+  has_validated_blocks: false,
+  hash: ADDRESS_HASH,
+  implementation_address: null,
+  implementation_name: null,
+  is_contract: false,
+  is_verified: false,
+  name: 'ChainLink Token (goerli)',
+  token: TOKEN_INFO_ERC_20,
+  private_tags: [],
+  public_tags: [],
+  watchlist_names: [],
+  watchlist_address_id: null,
+};

stubs/addressParams.ts

+import type { AddressParam } from 'types/api/addressParams';
+
+export const ADDRESS_HASH = '0x2B51Ae4412F79c3c1cB12AA40Ea4ECEb4e80511a';
+
+export const ADDRESS_PARAMS: AddressParam = {
+  hash: ADDRESS_HASH,
+  implementation_name: null,
+  is_contract: false,
+  is_verified: null,
+  name: null,
+  private_tags: [],
+  public_tags: [],
+  watchlist_names: [],
+};

stubs/block.ts

+export const BLOCK_HASH = '0x8fa7b9e5e5e79deeb62d608db22ba9a5cb45388c7ebb9223ae77331c6080dc70';

stubs/contract.ts

+import type { SmartContract } from 'types/api/contract';
+
+export const CONTRACT_CODE_UNVERIFIED = {
+  creation_bytecode: '0x60806040526e',
+  deployed_bytecode: '0x608060405233',
+  is_self_destructed: false,
+} as SmartContract;
+
+export const CONTRACT_CODE_VERIFIED = {
+  abi: [],
+  additional_sources: [],
+  can_be_visualized_via_sol2uml: true,
+  compiler_settings: {
+    compilationTarget: {
+      'contracts/StubContract.sol': 'StubContract',
+    },
+    evmVersion: 'london',
+    libraries: {},
+    metadata: {
+      bytecodeHash: 'ipfs',
+    },
+    optimizer: {
+      enabled: false,
+      runs: 200,
+    },
+    remappings: [],
+  },
+  compiler_version: 'v0.8.7+commit.e28d00a7',
+  creation_bytecode: '0x6080604052348',
+  deployed_bytecode: '0x60806040',
+  evm_version: 'london',
+  external_libraries: [],
+  file_path: 'contracts/StubContract.sol',
+  is_verified: true,
+  name: 'StubContract',
+  optimization_enabled: false,
+  optimization_runs: 200,
+  source_code: 'source_code',
+  verified_at: '2023-02-21T14:39:16.906760Z',
+} as unknown as SmartContract;

stubs/token.ts

+import type { TokenCounters, TokenHolder, TokenHolders, TokenInfo, TokenInstance, TokenInventoryResponse, TokenType } from 'types/api/token';
+import type { TokenTransfer, TokenTransferResponse } from 'types/api/tokenTransfer';
+
+import { ADDRESS_PARAMS, ADDRESS_HASH } from './addressParams';
+import { BLOCK_HASH } from './block';
+import { TX_HASH } from './tx';
+
+export const TOKEN_INFO_ERC_20: TokenInfo<'ERC-20'> = {
+  address: ADDRESS_HASH,
+  decimals: '18',
+  exchange_rate: null,
+  holders: '16026',
+  name: 'Stub Token (goerli)',
+  symbol: 'STUB',
+  total_supply: '6000000000000000000',
+  type: 'ERC-20',
+};
+
+export const TOKEN_INFO_ERC_721: TokenInfo<'ERC-721'> = {
+  ...TOKEN_INFO_ERC_20,
+  type: 'ERC-721',
+};
+
+export const TOKEN_INFO_ERC_1155: TokenInfo<'ERC-1155'> = {
+  ...TOKEN_INFO_ERC_20,
+  type: 'ERC-1155',
+};
+
+export const TOKEN_COUNTERS: TokenCounters = {
+  token_holders_count: '123456',
+  transfers_count: '123456',
+};
+
+export const TOKEN_HOLDER: TokenHolder = {
+  address: ADDRESS_PARAMS,
+  value: '1021378038331138520',
+};
+
+export const TOKEN_HOLDERS: TokenHolders = { items: Array(50).fill(TOKEN_HOLDER), next_page_params: null };
+
+export const TOKEN_TRANSFER_ERC_20: TokenTransfer = {
+  block_hash: BLOCK_HASH,
+  from: ADDRESS_PARAMS,
+  log_index: '4',
+  method: 'addLiquidity',
+  timestamp: '2022-06-24T10:22:11.000000Z',
+  to: ADDRESS_PARAMS,
+  token: TOKEN_INFO_ERC_20,
+  total: {
+    decimals: '18',
+    value: '9851351626684503',
+  },
+  tx_hash: TX_HASH,
+  type: 'token_minting',
+};
+
+export const TOKEN_TRANSFER_ERC_721: TokenTransfer = {
+  ...TOKEN_TRANSFER_ERC_20,
+  total: {
+    token_id: '35870',
+  },
+  token: TOKEN_INFO_ERC_721,
+};
+
+export const TOKEN_TRANSFER_ERC_1155: TokenTransfer = {
+  ...TOKEN_TRANSFER_ERC_20,
+  total: {
+    token_id: '35870',
+    value: '123',
+    decimals: '18',
+  },
+  token: TOKEN_INFO_ERC_1155,
+};
+
+export const getTokenTransfersStub = (type?: TokenType): TokenTransferResponse => {
+  switch (type) {
+    case 'ERC-721':
+      return { items: Array(50).fill(TOKEN_TRANSFER_ERC_721), next_page_params: null };
+    case 'ERC-1155':
+      return { items: Array(50).fill(TOKEN_TRANSFER_ERC_1155), next_page_params: null };
+    default:
+      return { items: Array(50).fill(TOKEN_TRANSFER_ERC_20), next_page_params: null };
+  }
+};
+
+export const TOKEN_INSTANCE: TokenInstance = {
+  animation_url: null,
+  external_app_url: 'https://vipsland.com/nft/collections/genesis/188882',
+  id: '188882',
+  image_url: 'https://ipfs.vipsland.com/nft/collections/genesis/188882.gif',
+  is_unique: true,
+  metadata: {
+    attributes: Array(3).fill({ trait_type: 'skin', value: '6' }),
+    description: '**GENESIS #188882**, **8a77ca1bcaa4036f** :: *844th* generation of *#57806 and #57809* :: **eGenetic Hash Code (eDNA)** = *2822355e953a462d*',
+    external_url: 'https://vipsland.com/nft/collections/genesis/188882',
+    image: 'https://ipfs.vipsland.com/nft/collections/genesis/188882.gif',
+    name: 'GENESIS #188882, 8a77ca1bcaa4036f. Blockchain pixel PFP NFT + "on music video" trait inspired by God',
+  },
+  owner: ADDRESS_PARAMS,
+  token: TOKEN_INFO_ERC_1155,
+  holder_address_hash: ADDRESS_HASH,
+};
+
+export const TOKEN_INSTANCES: TokenInventoryResponse = {
+  items: Array(50).fill(TOKEN_INSTANCE),
+  next_page_params: null,
+};

stubs/tx.ts

+export const TX_HASH = '0x3ed9d81e7c1001bdda1caa1dc62c0acbbe3d2c671cdc20dc1e65efdaa4186967';

theme/components/Skeleton.ts

@@ -26,7 +26,7 @@ const baseStyle = defineStyle((props) => {
 
   return {
     opacity: 1,
-    borderRadius: 'base',
+    borderRadius: 'md',
     borderColor: start,
     background: `linear-gradient(90deg, ${ start } 8%, ${ end } 18%, ${ start } 33%)`,
     backgroundSize: '200% 100%',

types/api/address.ts

@@ -12,6 +12,7 @@ export interface Address {
   creator_address_hash: string | null;
   creation_tx_hash: string | null;
   exchange_rate: string | null;
+  has_beacon_chain_withdrawals?: boolean;
   has_custom_methods_read: boolean;
   has_custom_methods_write: boolean;
   has_decompiled_code: boolean;
@@ -128,3 +129,19 @@ export interface AddressInternalTxsResponse {
     transaction_index: number;
   } | null;
 }
+
+export type AddressWithdrawalsResponse = {
+  items: Array<AddressWithdrawalsItem>;
+  next_page_params: {
+    index: number;
+    items_count: number;
+  };
+}
+
+export type AddressWithdrawalsItem = {
+  amount: string;
+  block_number: number;
+  index: number;
+  timestamp: string;
+  validator_index: number;
+}

types/api/block.ts

@@ -10,6 +10,7 @@ export interface Block {
   tx_count: number;
   miner: AddressParam;
   size: number;
+  has_beacon_chain_withdrawals?: boolean;
   hash: string;
   parent_hash: string;
   difficulty: string;
@@ -56,3 +57,18 @@ export interface NewBlockSocketResponse {
 export interface BlockFilters {
   type?: BlockType;
 }
+
+export type BlockWithdrawalsResponse = {
+  items: Array<BlockWithdrawalsItem>;
+  next_page_params: {
+    index: number;
+    items_count: number;
+  };
+}
+
+export type BlockWithdrawalsItem = {
+  amount: string;
+  index: number;
+  receiver: AddressParam;
+  validator_index: number;
+}

types/api/token.ts

@@ -21,7 +21,7 @@ export interface TokenCounters {
 
 export interface TokenHolders {
   items: Array<TokenHolder>;
-  next_page_params: TokenHoldersPagination;
+  next_page_params: TokenHoldersPagination | null;
 }
 
 export type TokenHolder = {
@@ -52,7 +52,7 @@ export interface TokenInstanceTransfersCount {
 
 export interface TokenInventoryResponse {
   items: Array<TokenInstance>;
-  next_page_params: TokenInventoryPagination;
+  next_page_params: TokenInventoryPagination | null;
 }
 
 export type TokenInventoryPagination = {

types/api/withdrawals.ts

+import type { AddressParam } from './addressParams';
+
+export type WithdrawalsResponse = {
+  items: Array<WithdrawalsItem>;
+  next_page_params: {
+    index: number;
+    items_count: number;
+  };
+}
+
+export type WithdrawalsItem = {
+  amount: string;
+  block_number: number;
+  index: number;
+  receiver: AddressParam;
+  timestamp: string;
+  validator_index: number;
+}

types/client/wallets.ts

+import type { providers } from 'ethers';
+
+export type WalletType = 'metamask' | 'coinbase';
+
+export interface WalletInfo {
+  add_token_text: string;
+  add_network_text: string;
+  icon: React.ElementType;
+}
+
+export interface ExternalProvider extends providers.ExternalProvider {
+  isCoinbaseWallet?: boolean;
+  // have to patch ethers here, since params could be not only an array
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  request?: (request: { method: string; params?: any }) => Promise<any>;
+}

types/nextjs-routes.d.ts

@@ -42,7 +42,8 @@ declare module "nextjs-routes" {
     | DynamicRoute<"/tx/[hash]", { "hash": string }>
     | StaticRoute<"/txs">
     | StaticRoute<"/verified-contracts">
-    | StaticRoute<"/visualize/sol2uml">;
+    | StaticRoute<"/visualize/sol2uml">
+    | StaticRoute<"/withdrawals">;
 
   interface StaticRoute<Pathname> {
     pathname: Pathname;

ui/address/AddressDetails.pw.tsx

-import type { MetaMaskInpageProvider } from '@metamask/providers';
 import { test, expect } from '@playwright/experimental-ct-react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
@@ -73,7 +72,9 @@ test('token', async({ mount, page }) => {
   }), { times: 1 });
 
   await page.evaluate(() => {
-    window.ethereum = { } as MetaMaskInpageProvider;
+    window.ethereum = {
+      providers: [ { isMetaMask: true } ],
+    };
   });
 
   const component = await mount(

ui/address/AddressTokens.tsx

@@ -8,11 +8,13 @@ import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { tokenTabsByType } from 'ui/pages/Address';
 import Pagination from 'ui/shared/Pagination';
+import type { Props as PaginationProps } from 'ui/shared/Pagination';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
 
+import ERC1155Tokens from './tokens/ERC1155Tokens';
+import ERC20Tokens from './tokens/ERC20Tokens';
+import ERC721Tokens from './tokens/ERC721Tokens';
 import TokenBalances from './tokens/TokenBalances';
-import TokensWithIds from './tokens/TokensWithIds';
-import TokensWithoutIds from './tokens/TokensWithoutIds';
 
 const TAB_LIST_PROPS = {
   marginBottom: 0,
@@ -32,21 +34,59 @@ const AddressTokens = () => {
 
   const scrollRef = React.useRef<HTMLDivElement>(null);
 
-  const tokenType: TokenType = (Object.keys(tokenTabsByType) as Array<TokenType>).find(key => tokenTabsByType[key] === router.query.tab) || 'ERC-20';
+  const tab = router.query.tab?.toString();
+  const tokenType: TokenType = (Object.keys(tokenTabsByType) as Array<TokenType>).find(key => tokenTabsByType[key] === tab) || 'ERC-20';
 
-  const tokensQuery = useQueryWithPages({
+  const erc20Query = useQueryWithPages({
     resourceName: 'address_tokens',
     pathParams: { hash: router.query.hash?.toString() },
-    filters: { type: tokenType },
+    filters: { type: 'ERC-20' },
     scrollRef,
+    options: {
+      enabled: tokenType === 'ERC-20',
+    },
+  });
+
+  const erc721Query = useQueryWithPages({
+    resourceName: 'address_tokens',
+    pathParams: { hash: router.query.hash?.toString() },
+    filters: { type: 'ERC-721' },
+    scrollRef,
+    options: {
+      enabled: tokenType === 'ERC-721',
+    },
+  });
+
+  const erc1155Query = useQueryWithPages({
+    resourceName: 'address_tokens',
+    pathParams: { hash: router.query.hash?.toString() },
+    filters: { type: 'ERC-1155' },
+    scrollRef,
+    options: {
+      enabled: tokenType === 'ERC-1155',
+    },
   });
 
   const tabs = [
-    { id: tokenTabsByType['ERC-20'], title: 'ERC-20', component: <TokensWithoutIds tokensQuery={ tokensQuery }/> },
-    { id: tokenTabsByType['ERC-721'], title: 'ERC-721', component: <TokensWithoutIds tokensQuery={ tokensQuery }/> },
-    { id: tokenTabsByType['ERC-1155'], title: 'ERC-1155', component: <TokensWithIds tokensQuery={ tokensQuery }/> },
+    { id: tokenTabsByType['ERC-20'], title: 'ERC-20', component: <ERC20Tokens tokensQuery={ erc20Query }/> },
+    { id: tokenTabsByType['ERC-721'], title: 'ERC-721', component: <ERC721Tokens tokensQuery={ erc721Query }/> },
+    { id: tokenTabsByType['ERC-1155'], title: 'ERC-1155', component: <ERC1155Tokens tokensQuery={ erc1155Query }/> },
   ];
 
+  let isPaginationVisible;
+  let pagination: PaginationProps | undefined;
+
+  if (tab === tokenTabsByType['ERC-1155']) {
+    isPaginationVisible = erc1155Query.isPaginationVisible;
+    pagination = erc1155Query.pagination;
+  } else if (tab === tokenTabsByType['ERC-721']) {
+    isPaginationVisible = erc721Query.isPaginationVisible;
+    pagination = erc721Query.pagination;
+  } else {
+    isPaginationVisible = erc20Query.isPaginationVisible;
+    pagination = erc20Query.pagination;
+  }
+
   return (
     <>
       <TokenBalances/>
@@ -58,7 +98,7 @@ const AddressTokens = () => {
         colorScheme="gray"
         size="sm"
         tabListProps={ isMobile ? TAB_LIST_PROPS_MOBILE : TAB_LIST_PROPS }
-        rightSlot={ tokensQuery.isPaginationVisible && !isMobile ? <Pagination { ...tokensQuery.pagination }/> : null }
+        rightSlot={ isPaginationVisible && !isMobile ? <Pagination { ...pagination }/> : null }
         stickyEnabled={ !isMobile }
       />
     </>

ui/address/AddressWithdrawals.tsx

+import { Show, Hide } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import useQueryWithPages from 'lib/hooks/useQueryWithPages';
+import getQueryParamString from 'lib/router/getQueryParamString';
+import ActionBar from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import Pagination from 'ui/shared/Pagination';
+import WithdrawalsListItem from 'ui/withdrawals/WithdrawalsListItem';
+import WithdrawalsTable from 'ui/withdrawals/WithdrawalsTable';
+
+const AddressWithdrawals = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>}) => {
+  const router = useRouter();
+
+  const hash = getQueryParamString(router.query.hash);
+
+  const { data, isLoading, isError, pagination, isPaginationVisible } = useQueryWithPages({
+    resourceName: 'address_withdrawals',
+    pathParams: { hash },
+    scrollRef,
+  });
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        { data.items.map((item) => <WithdrawalsListItem item={ item } key={ item.index } view="address"/>) }
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <WithdrawalsTable items={ data.items } view="address" top={ isPaginationVisible ? 80 : 0 }/>
+      </Hide>
+    </>
+  ) : null ;
+
+  const actionBar = isPaginationVisible ? (
+    <ActionBar mt={ -6 } showShadow={ isLoading }>
+      <Pagination ml="auto" { ...pagination }/>
+    </ActionBar>
+  ) : null;
+
+  return (
+    <DataListDisplay
+      isError={ isError }
+      isLoading={ isLoading }
+      items={ data?.items }
+      skeletonProps={{ isLongSkeleton: true, skeletonDesktopColumns: Array(5).fill(`${ 100 / 5 }%`), skeletonDesktopMinW: '950px' }}
+      emptyText="There are no withdrawals for this address."
+      content={ content }
+      actionBar={ actionBar }
+    />
+  );
+};
+
+export default AddressWithdrawals;

ui/address/coinBalance/AddressCoinBalanceTableItem.tsx

@@ -27,13 +27,12 @@ const AddressCoinBalanceTableItem = (props: Props) => {
         <LinkInternal href={ blockUrl } fontWeight="700">{ props.block_number }</LinkInternal>
       </Td>
       <Td>
-        { props.transaction_hash ?
+        { props.transaction_hash &&
           (
             <Address w="150px" fontWeight="700">
               <AddressLink hash={ props.transaction_hash } type="transaction"/>
             </Address>
-          ) :
-          <Text fontWeight="700">-</Text>
+          )
         }
       </Td>
       <Td>

ui/address/contract/ContractSourceCode.tsx

-import { Flex, Text, Tooltip } from '@chakra-ui/react';
+import { Flex, Skeleton, Text, Tooltip } from '@chakra-ui/react';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
@@ -17,14 +17,15 @@ interface Props {
   filePath?: string;
   additionalSource?: SmartContract['additional_sources'];
   remappings?: Array<string>;
+  isLoading?: boolean;
 }
 
-const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, additionalSource, remappings }: Props) => {
+const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, additionalSource, remappings, isLoading }: Props) => {
   const heading = (
-    <Text fontWeight={ 500 }>
+    <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>
       <span>Contract source code</span>
       <Text whiteSpace="pre" as="span" variant="secondary"> ({ isViper ? 'Vyper' : 'Solidity' })</Text>
-    </Text>
+    </Skeleton>
   );
 
   const diagramLink = hasSol2Yml && address ? (
@@ -32,9 +33,10 @@ const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, addi
       <LinkInternal
         href={ route({ pathname: '/visualize/sol2uml', query: { address } }) }
         ml="auto"
-        mr={ 3 }
       >
-        View UML diagram
+        <Skeleton isLoaded={ !isLoading }>
+          View UML diagram
+        </Skeleton>
       </LinkInternal>
     </Tooltip>
   ) : null;
@@ -47,7 +49,7 @@ const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, addi
   }, [ additionalSource, data, filePath, isViper ]);
 
   const copyToClipboard = editorData.length === 1 ?
-    <CopyToClipboard text={ editorData[0].source_code }/> :
+    <CopyToClipboard text={ editorData[0].source_code } isLoading={ isLoading } ml={ 3 }/> :
     null;
 
   return (
@@ -57,7 +59,7 @@ const ContractSourceCode = ({ data, hasSol2Yml, address, isViper, filePath, addi
         { diagramLink }
         { copyToClipboard }
       </Flex>
-      <CodeEditor data={ editorData } remappings={ remappings }/>
+      { isLoading ? <Skeleton h="557px" w="100%"/> : <CodeEditor data={ editorData } remappings={ remappings }/> }
     </section>
   );
 };

ui/address/details/AddressQrCode.tsx

-import { chakra, Alert, Icon, Modal, ModalBody, ModalContent, ModalCloseButton, ModalOverlay, Box, useDisclosure, Tooltip, IconButton } from '@chakra-ui/react';
+import {
+  chakra,
+  Alert,
+  Icon,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalCloseButton,
+  ModalOverlay,
+  Box,
+  useDisclosure,
+  Tooltip,
+  IconButton,
+  Skeleton,
+} from '@chakra-ui/react';
 import * as Sentry from '@sentry/react';
 import QRCode from 'qrcode';
 import React from 'react';
@@ -13,9 +27,10 @@ const SVG_OPTIONS = {
 interface Props {
   className?: string;
   hash: string;
+  isLoading?: boolean;
 }
 
-const AddressQrCode = ({ hash, className }: Props) => {
+const AddressQrCode = ({ hash, className, isLoading }: Props) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const isMobile = useIsMobile();
   const [ qr, setQr ] = React.useState('');
@@ -36,6 +51,10 @@ const AddressQrCode = ({ hash, className }: Props) => {
     }
   }, [ hash, isOpen, onClose ]);
 
+  if (isLoading) {
+    return <Skeleton className={ className } w="36px" h="32px" borderRadius="base"/>;
+  }
+
   return (
     <>
       <Tooltip label="Click to view QR code">

ui/address/internals/AddressIntTxsListItem.tsx

@@ -11,6 +11,7 @@ import dayjs from 'lib/date/dayjs';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import InOutTag from 'ui/shared/InOutTag';
 import LinkInternal from 'ui/shared/LinkInternal';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
@@ -56,15 +57,19 @@ const TxInternalsListItem = ({
         <Address width="calc((100% - 48px) / 2)">
           <AddressIcon address={ from }/>
           <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ from.hash } isDisabled={ isOut }/>
+          { isIn && <CopyToClipboard text={ from.hash }/> }
         </Address>
         { (isIn || isOut) ?
           <InOutTag isIn={ isIn } isOut={ isOut }/> :
           <Icon as={ eastArrowIcon } boxSize={ 6 } color="gray.500"/>
         }
-        <Address width="calc((100% - 48px) / 2)">
-          <AddressIcon address={ toData }/>
-          <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ toData.hash } isDisabled={ isIn }/>
-        </Address>
+        { toData && (
+          <Address width="calc((100% - 48px) / 2)">
+            <AddressIcon address={ toData }/>
+            <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ toData.hash } isDisabled={ isIn }/>
+            { isOut && <CopyToClipboard text={ toData.hash }/> }
+          </Address>
+        ) }
       </Box>
       <HStack spacing={ 3 }>
         <Text fontSize="sm" fontWeight={ 500 }>Value { appConfig.network.currency.symbol }</Text>

ui/address/internals/AddressIntTxsTableItem.tsx

@@ -11,6 +11,7 @@ import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import InOutTag from 'ui/shared/InOutTag';
 import LinkInternal from 'ui/shared/LinkInternal';
 import TxStatus from 'ui/shared/TxStatus';
@@ -64,6 +65,7 @@ const AddressIntTxsTableItem = ({
         <Address display="inline-flex" maxW="100%">
           <AddressIcon address={ from }/>
           <AddressLink type="address" ml={ 2 } fontWeight="500" hash={ from.hash } alias={ from.name } flexGrow={ 1 } isDisabled={ isOut }/>
+          { isIn && <CopyToClipboard text={ from.hash }/> }
         </Address>
       </Td>
       <Td px={ 0 } verticalAlign="middle">
@@ -73,10 +75,13 @@ const AddressIntTxsTableItem = ({
         }
       </Td>
       <Td verticalAlign="middle">
-        <Address display="inline-flex" maxW="100%">
-          <AddressIcon address={ toData }/>
-          <AddressLink type="address" hash={ toData.hash } alias={ toData.name } fontWeight="500" ml={ 2 } isDisabled={ isIn }/>
-        </Address>
+        { toData && (
+          <Address display="inline-flex" maxW="100%">
+            <AddressIcon address={ toData }/>
+            <AddressLink type="address" hash={ toData.hash } alias={ toData.name } fontWeight="500" ml={ 2 } isDisabled={ isIn }/>
+            { isOut && <CopyToClipboard text={ toData.hash }/> }
+          </Address>
+        ) }
       </Td>
       <Td isNumeric verticalAlign="middle">
         { BigNumber(value).div(BigNumber(10 ** appConfig.network.currency.decimals)).toFormat() }

ui/address/tokens/TokensWithIds.tsx → ui/address/tokens/ERC1155Tokens.tsx

@@ -19,7 +19,7 @@ type Props = {
   };
 }
 
-const TokensWithIds = ({ tokensQuery }: Props) => {
+const ERC1155Tokens = ({ tokensQuery }: Props) => {
   const isMobile = useIsMobile();
 
   const { isError, isLoading, data, pagination, isPaginationVisible } = tokensQuery;
@@ -69,4 +69,4 @@ const TokensWithIds = ({ tokensQuery }: Props) => {
   );
 };
 
-export default TokensWithIds;
+export default ERC1155Tokens;

ui/address/tokens/TokensWithoutIds.tsx → ui/address/tokens/ERC20Tokens.tsx

@@ -10,8 +10,8 @@ import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/Pagination';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
 
-import TokensListItem from './TokensListItem';
-import TokensTable from './TokensTable';
+import ERC20TokensListItem from './ERC20TokensListItem';
+import ERC20TokensTable from './ERC20TokensTable';
 
 type Props = {
   tokensQuery: UseQueryResult<AddressTokensResponse> & {
@@ -20,7 +20,7 @@ type Props = {
   };
 }
 
-const TokensWithoutIds = ({ tokensQuery }: Props) => {
+const ERC20Tokens = ({ tokensQuery }: Props) => {
   const isMobile = useIsMobile();
 
   const { isError, isLoading, data, pagination, isPaginationVisible } = tokensQuery;
@@ -33,8 +33,8 @@ const TokensWithoutIds = ({ tokensQuery }: Props) => {
 
   const content = data?.items ? (
     <>
-      <Hide below="lg" ssr={ false }><TokensTable data={ data.items } top={ isPaginationVisible ? 72 : 0 }/></Hide>
-      <Show below="lg" ssr={ false }>{ data.items.map(item => <TokensListItem key={ item.token.address } { ...item }/>) }</Show></>
+      <Hide below="lg" ssr={ false }><ERC20TokensTable data={ data.items } top={ isPaginationVisible ? 72 : 0 }/></Hide>
+      <Show below="lg" ssr={ false }>{ data.items.map(item => <ERC20TokensListItem key={ item.token.address } { ...item }/>) }</Show></>
   ) : null;
 
   return (
@@ -54,4 +54,4 @@ const TokensWithoutIds = ({ tokensQuery }: Props) => {
 
 };
 
-export default TokensWithoutIds;
+export default ERC20Tokens;

ui/address/tokens/TokensListItem.tsx → ui/address/tokens/ERC20TokensListItem.tsx

@@ -4,16 +4,15 @@ import React from 'react';
 import type { AddressTokenBalance } from 'types/api/address';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
+import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TokenLogo from 'ui/shared/TokenLogo';
 
-import AddressAddToMetaMask from '../details/AddressAddToMetaMask';
-
 type Props = AddressTokenBalance;
 
-const TokensListItem = ({ token, value }: Props) => {
+const ERC20TokensListItem = ({ token, value }: Props) => {
 
   const tokenString = [ token.name, token.symbol && `(${ token.symbol })` ].filter(Boolean).join(' ');
 
@@ -31,7 +30,7 @@ const TokensListItem = ({ token, value }: Props) => {
       <Flex alignItems="center" pl={ 8 }>
         <AddressLink hash={ token.address } type="address" truncation="constant"/>
         <CopyToClipboard text={ token.address } ml={ 1 }/>
-        <AddressAddToMetaMask token={ token } ml={ 2 }/>
+        <AddressAddToWallet token={ token } ml={ 2 }/>
       </Flex>
       { token.exchange_rate !== undefined && token.exchange_rate !== null && (
         <HStack spacing={ 3 }>
@@ -53,4 +52,4 @@ const TokensListItem = ({ token, value }: Props) => {
   );
 };
 
-export default TokensListItem;
+export default ERC20TokensListItem;

ui/address/tokens/TokensTable.tsx → ui/address/tokens/ERC20TokensTable.tsx

@@ -5,14 +5,14 @@ import type { AddressTokenBalance } from 'types/api/address';
 
 import { default as Thead } from 'ui/shared/TheadSticky';
 
-import TokensTableItem from './TokensTableItem';
+import ERC20TokensTableItem from './ERC20TokensTableItem';
 
 interface Props {
   data: Array<AddressTokenBalance>;
   top: number;
 }
 
-const TokensTable = ({ data, top }: Props) => {
+const ERC20TokensTable = ({ data, top }: Props) => {
   return (
     <Table variant="simple" size="sm">
       <Thead top={ top }>
@@ -26,11 +26,11 @@ const TokensTable = ({ data, top }: Props) => {
       </Thead>
       <Tbody>
         { data.map((item) => (
-          <TokensTableItem key={ item.token.address } { ...item }/>
+          <ERC20TokensTableItem key={ item.token.address } { ...item }/>
         )) }
       </Tbody>
     </Table>
   );
 };
 
-export default TokensTable;
+export default ERC20TokensTable;

ui/address/tokens/TokensTableItem.tsx → ui/address/tokens/ERC20TokensTableItem.tsx

@@ -4,15 +4,14 @@ import React from 'react';
 import type { AddressTokenBalance } from 'types/api/address';
 
 import getCurrencyValue from 'lib/getCurrencyValue';
+import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import TokenLogo from 'ui/shared/TokenLogo';
 
-import AddressAddToMetaMask from '../details/AddressAddToMetaMask';
-
 type Props = AddressTokenBalance;
 
-const TokensTableItem = ({
+const ERC20TokensTableItem = ({
   token,
   value,
 }: Props) => {
@@ -38,20 +37,20 @@ const TokensTableItem = ({
             <AddressLink hash={ token.address } type="address" truncation="constant"/>
             <CopyToClipboard text={ token.address } ml={ 1 }/>
           </Flex>
-          <AddressAddToMetaMask token={ token } ml={ 4 }/>
+          <AddressAddToWallet token={ token } ml={ 4 }/>
         </Flex>
       </Td>
       <Td isNumeric verticalAlign="middle">
-        { token.exchange_rate ? `$${ token.exchange_rate }` : '-' }
+        { token.exchange_rate && `$${ token.exchange_rate }` }
       </Td>
       <Td isNumeric verticalAlign="middle">
         { tokenQuantity }
       </Td>
       <Td isNumeric verticalAlign="middle">
-        { tokenValue ? `$${ tokenValue }` : '-' }
+        { tokenValue && `$${ tokenValue }` }
       </Td>
     </Tr>
   );
 };
 
-export default React.memo(TokensTableItem);
+export default React.memo(ERC20TokensTableItem);

ui/address/tokens/ERC721Tokens.tsx

+import { Show, Hide } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import React from 'react';
+
+import type { AddressTokensResponse } from 'types/api/address';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import ActionBar from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import Pagination from 'ui/shared/Pagination';
+import type { Props as PaginationProps } from 'ui/shared/Pagination';
+
+import ERC721TokensListItem from './ERC721TokensListItem';
+import ERC721TokensTable from './ERC721TokensTable';
+
+type Props = {
+  tokensQuery: UseQueryResult<AddressTokensResponse> & {
+    pagination: PaginationProps;
+    isPaginationVisible: boolean;
+  };
+}
+
+const ERC721Tokens = ({ tokensQuery }: Props) => {
+  const isMobile = useIsMobile();
+
+  const { isError, isLoading, data, pagination, isPaginationVisible } = tokensQuery;
+
+  const actionBar = isMobile && isPaginationVisible && (
+    <ActionBar mt={ -6 }>
+      <Pagination ml="auto" { ...pagination }/>
+    </ActionBar>
+  );
+
+  const content = data?.items ? (
+    <>
+      <Hide below="lg" ssr={ false }><ERC721TokensTable data={ data.items } top={ isPaginationVisible ? 72 : 0 }/></Hide>
+      <Show below="lg" ssr={ false }>{ data.items.map(item => <ERC721TokensListItem key={ item.token.address } { ...item }/>) }</Show></>
+  ) : null;
+
+  return (
+    <DataListDisplay
+      isError={ isError }
+      isLoading={ isLoading }
+      items={ data?.items }
+      skeletonProps={{
+        isLongSkeleton: true,
+        skeletonDesktopColumns: [ '40%', '40%', '20%' ],
+      }}
+      emptyText="There are no tokens of selected type."
+      content={ content }
+      actionBar={ actionBar }
+    />
+  );
+
+};
+
+export default ERC721Tokens;

ui/address/tokens/ERC721TokensListItem.tsx

+import { Flex, HStack, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressTokenBalance } from 'types/api/address';
+
+import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
+import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import TokenLogo from 'ui/shared/TokenLogo';
+
+type Props = AddressTokenBalance;
+
+const ERC721TokensListItem = ({ token, value }: Props) => {
+
+  const tokenString = [ token.name, token.symbol && `(${ token.symbol })` ].filter(Boolean).join(' ');
+
+  return (
+    <ListItemMobile rowGap={ 2 }>
+      <Flex alignItems="center" width="100%">
+        <TokenLogo hash={ token.address } name={ token.name } boxSize={ 6 } mr={ 2 }/>
+        <AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString }/>
+      </Flex>
+      <Flex alignItems="center" pl={ 8 }>
+        <AddressLink hash={ token.address } type="address" truncation="constant"/>
+        <CopyToClipboard text={ token.address } ml={ 1 }/>
+        <AddressAddToWallet token={ token } ml={ 2 }/>
+      </Flex>
+      <HStack spacing={ 3 }>
+        <Text fontSize="sm" fontWeight={ 500 }>Quantity</Text>
+        <Text fontSize="sm" variant="secondary">{ value }</Text>
+      </HStack>
+    </ListItemMobile>
+  );
+};
+
+export default ERC721TokensListItem;

ui/address/tokens/ERC721TokensTable.tsx

+import { Table, Tbody, Tr, Th } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressTokenBalance } from 'types/api/address';
+
+import { default as Thead } from 'ui/shared/TheadSticky';
+
+import ERC721TokensTableItem from './ERC721TokensTableItem';
+
+interface Props {
+  data: Array<AddressTokenBalance>;
+  top: number;
+}
+
+const ERC721TokensTable = ({ data, top }: Props) => {
+  return (
+    <Table variant="simple" size="sm">
+      <Thead top={ top }>
+        <Tr>
+          <Th width="40%">Asset</Th>
+          <Th width="40%">Contract address</Th>
+          <Th width="20%" isNumeric>Quantity</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        { data.map((item) => (
+          <ERC721TokensTableItem key={ item.token.address } { ...item }/>
+        )) }
+      </Tbody>
+    </Table>
+  );
+};
+
+export default ERC721TokensTable;

ui/address/tokens/ERC721TokensTableItem.tsx

+import { Tr, Td, Flex } from '@chakra-ui/react';
+import React from 'react';
+
+import type { AddressTokenBalance } from 'types/api/address';
+
+import AddressAddToWallet from 'ui/shared/address/AddressAddToWallet';
+import AddressLink from 'ui/shared/address/AddressLink';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import TokenLogo from 'ui/shared/TokenLogo';
+
+type Props = AddressTokenBalance;
+
+const ERC721TokensTableItem = ({
+  token,
+  value,
+}: Props) => {
+
+  const tokenString = [ token.name, token.symbol && `(${ token.symbol })` ].filter(Boolean).join(' ');
+
+  return (
+    <Tr>
+      <Td verticalAlign="middle">
+        <Flex alignItems="center">
+          <TokenLogo hash={ token.address } name={ token.name } boxSize={ 6 } mr={ 2 }/>
+          <AddressLink fontWeight="700" hash={ token.address } type="token" alias={ tokenString }/>
+        </Flex>
+      </Td>
+      <Td verticalAlign="middle">
+        <Flex alignItems="center" width="150px" justifyContent="space-between">
+          <Flex alignItems="center">
+            <AddressLink hash={ token.address } type="address" truncation="dynamic"/>
+            <CopyToClipboard text={ token.address } ml={ 1 }/>
+          </Flex>
+          <AddressAddToWallet token={ token } ml={ 4 }/>
+        </Flex>
+      </Td>
+      <Td isNumeric verticalAlign="middle">
+        { value }
+      </Td>
+    </Tr>
+  );
+};
+
+export default React.memo(ERC721TokensTableItem);