Merge pull request #637 from blockscout/custom-skin

skin for base

.env.template

@@ -21,6 +21,7 @@ NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_TOKEN_AD
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=__PLACEHOLDER_FOR_NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED__
 NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE__
 NEXT_PUBLIC_NETWORK_RPC_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_RPC_URL__
+NEXT_PUBLIC_IS_TESTNET=__PLACEHOLDER_FOR_NEXT_PUBLIC_IS_TESTNET__
 
 # ui config
 NEXT_PUBLIC_BLOCKSCOUT_VERSION=__PLACEHOLDER_FOR_NEXT_PUBLIC_BLOCKSCOUT_VERSION__

.gitignore

@@ -32,9 +32,6 @@ yarn-error.log*
 /configs/envs/.env.secrets
 /configs/envs/.samples
 
-# vercel
-.vercel
-
 # typescript
 *.tsbuildinfo
 

.vscode/tasks.json

@@ -63,6 +63,26 @@
                 "instanceLimit": 1
             }
         },
+        {
+            "type": "shell",
+            "command": "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",
+            "presentation": {
+                "reveal": "silent",
+                "panel": "shared",
+                "close": true,
+                "revealProblems": "onProblem",
+            },
+            "icon": {
+                "color": "terminal.ansiMagenta",
+                "id": "server-process"
+            },
+            "runOptions": {
+                "instanceLimit": 1
+            }
+        },
         {
             "type": "typescript",
             "label": "tsc build",

README.md

@@ -55,6 +55,7 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_NETWORK_LOGO | `string` *(optional)* | Network logo; if not provided, will fallback to logo predefined in the project; if the project doesn't have logo for such network then the common placeholder will be shown; *Note* that logo height should be 20px and width less than 120px | `https://www.fillmurray.com/240/40` |
 | NEXT_PUBLIC_NETWORK_SMALL_LOGO | `string` *(optional)* | Small version of network logo; if not provided, will fallback to logo predefined in the project; if the project doesn't have logo for such network then the common placeholder will be shown; *Note* that logo should have square format (e.g 60px by 60px) | `https://www.fillmurray.com/60/60` |
 | NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED | `boolean` *(optional)* | Set to true if network has account feature | `true` |
+| NEXT_PUBLIC_IS_TESTNET | `boolean` *(optional)* | Set to true if network is testnet | `true` |
 
 ### UI configuration
 

configs/app/config.ts

@@ -76,6 +76,7 @@ const config = Object.freeze({
     explorers: parseEnvJson<Array<NetworkExplorer>>(getEnvValue(process.env.NEXT_PUBLIC_NETWORK_EXPLORERS)) || [],
     verificationType: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE) || 'mining',
     rpcUrl: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_RPC_URL),
+    isTestnet: getEnvValue(process.env.NEXT_PUBLIC_IS_TESTNET) === 'true',
   },
   footerLinks: {
     github: getEnvValue(process.env.NEXT_PUBLIC_FOOTER_GITHUB_LINK),

configs/envs/.env.goerli.optimism

+# ui config
+NEXT_PUBLIC_FEATURED_NETWORKS=[{'title':'Göerli','url':'https://eth-goerli.blockscout.com/','group':'testnets','type':'goerli'},{'title':'Base Göerli','url':'https://l2-goerli.blockscout.com/','group':'testnets','type':'base_goerli'}]
+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%)
+
+# network config
+NEXT_PUBLIC_NETWORK_NAME=Base Göerli
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Base
+NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME=optimism
+NEXT_PUBLIC_NETWORK_TYPE=base_goerli
+NEXT_PUBLIC_NETWORK_ID=420
+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_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrqUAcjgGJ4jU88C
+NEXT_PUBLIC_MARKETPLACE_APP_LIST=[{'author':'Uniswap','id':'uniswap','title':'Uniswap','logo':'https://www.gitbook.com/cdn-cgi/image/width=288,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FT8RR0UqqvH6wAVfaaM4f%252FUniswap.png%3Falt%3Dmedia%26token%3D797851a0-2d80-4f7b-8d80-f9ba664c0b3d','categories':['tools'],'shortDescription':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','site':'https://docs.uniswap.org/','description':'Uniswap is a cryptocurrency exchange which uses a decentralized network protocol.','url':'https://app.uniswap.org/swap'}, {'author':'Aave','id': 'aave','title': 'Aave','logo': 'https://www.gitbook.com/cdn-cgi/image/width=288,dpr=2.200000047683716,format=auto/https%3A%2F%2Ffiles.gitbook.com%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-Lq1XoWGmy8zggj_u2fM%252Fuploads%252FaNQY8jHNue30P2caV79v%252FAave.png%3Falt%3Dmedia%26token%3Dda9ea09b-a5d8-4bf1-bdfe-41837eebdd03','categories':['tools'],'shortDescription':'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','site': 'https://docs.aave.com/faq/','description': 'Aave is a decentralised non-custodial liquidity market protocol where users can participate as suppliers or borrowers. Suppliers provide liquidity to the market to earn a passive income, while borrowers are able to borrow in an overcollateralised (perpetually) or undercollateralised (one-block liquidity) fashion.','url': 'https://staging.aave.com/'}, {'author': 'Blockscout','id':'token-approval-tracker','title':'Token Approval Tracker','logo':'https://approval-tracker.apps.blockscout.com/icon-192.png','categories':['security','tools'],'shortDescription':'Token Approval Tracker shows all approvals for any ERC20-compliant tokens and NFTs and lets to revoke them or adjust the approved amount.','site':'https://docs.blockscout.com/for-users/blockscout-apps/token-approval-tracker','description':'Token Approval Tracker shows all approvals for any ERC20-compliant tokens and NFTs and lets to revoke them or adjust the approved amount.','url':'https://approval-tracker.apps.blockscout.com/'}]
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_IS_TESTNET=true
+
+# api config
+NEXT_PUBLIC_API_HOST=blockscout-optimism-goerli.test.aws-k8s.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_STATS_API_HOST=https://stats-test.aws-k8s.blockscout.com
+
+# l2 config
+NEXT_PUBLIC_IS_L2_NETWORK=true
+NEXT_PUBLIC_L1_BASE_URL=https://blockscout-main.test.aws-k8s.blockscout.com/
+NEXT_PUBLIC_L2_WITHDRAWAL_URL=https://app.optimism.io/bridge/withdraw
\ No newline at end of file

configs/envs/.env.jest

@@ -7,6 +7,7 @@ NEXT_PUBLIC_APP_ENV=testing
 NEXT_PUBLIC_BLOCKSCOUT_VERSION=v4.1.7-beta
 NEXT_PUBLIC_FOOTER_GITHUB_LINK=https://github.com/blockscout/blockscout
 NEXT_PUBLIC_FOOTER_TWITTER_LINK=https://www.twitter.com/blockscoutcom
+NEXT_PUBLIC_IS_TESTNET=true
 
 # api config
 NEXT_PUBLIC_API_HOST=blockscout.com

configs/envs/.env.pw

@@ -14,6 +14,7 @@ NEXT_PUBLIC_HOMEPAGE_SHOW_GAS_TRACKER=true
 NEXT_PUBLIC_NETWORK_LOGO=
 NEXT_PUBLIC_NETWORK_SMALL_LOGO=
 NEXT_PUBLIC_NETWORK_RPC_URL=https://core.poa.network
+NEXT_PUBLIC_IS_TESTNET=true
 
 # api config
 NEXT_PUBLIC_API_HOST=blockscout.com

deploy/values/main/values.yaml

@@ -575,3 +575,5 @@ frontend:
       _default: "['daily_txs','coin_price','market_cup']"
     NEXT_PUBLIC_API_SPEC_URL: 
       _default: https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+    NEXT_PUBLIC_IS_TESTNET:
+      _default: true

icons/networks/icons/base.svg

+<svg viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.978 26C21.066 26 26 21.075 26 15S21.066 4 14.978 4C9.29 4 4.608 8.3 4.02 13.821h14.502v2.161H4C4.498 21.597 9.223 26 14.978 26Z" fill="#2151F5"/>
+</svg>

icons/networks/logos/base.svg

+<svg viewBox="0 0 404 112" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M112 56c0 30.928-25.121 56-56.11 56C26.59 112 2.534 89.586 0 61h73.925V50H.098c3-28.107 26.834-50 55.792-50C86.879 0 112 25.072 112 56Zm212.983-22.244c-.492-4.27-2.487-7.586-5.985-9.945-3.498-2.36-7.788-3.54-12.87-3.54-3.717 0-6.969.618-9.756 1.854-2.76 1.236-4.918 2.936-6.476 5.099-1.53 2.163-2.295 4.621-2.295 7.374 0 2.304.532 4.285 1.598 5.942a14.364 14.364 0 0 0 4.181 4.088 29.617 29.617 0 0 0 5.328 2.655 64.816 64.816 0 0 0 5.124 1.643l8.526 2.36c2.186.59 4.618 1.405 7.296 2.444 2.705 1.04 5.288 2.458 7.747 4.256 2.487 1.77 4.536 4.046 6.149 6.827 1.612 2.781 2.418 6.195 2.418 10.24 0 4.664-1.189 8.878-3.566 12.642-2.35 3.765-5.793 6.757-10.329 8.976-4.509 2.22-9.988 3.329-16.437 3.329-6.012 0-11.218-.997-15.617-2.992-4.372-1.995-7.815-4.776-10.33-8.344-2.486-3.568-3.893-7.711-4.221-12.431h10.493c.273 3.259 1.339 5.956 3.197 8.091 1.886 2.107 4.263 3.68 7.132 4.72 2.897 1.01 6.012 1.517 9.346 1.517 3.88 0 7.364-.646 10.452-1.939 3.088-1.32 5.534-3.146 7.337-5.478 1.804-2.36 2.705-5.113 2.705-8.26 0-2.865-.778-5.197-2.336-6.995-1.557-1.798-3.607-3.259-6.148-4.382-2.542-1.124-5.288-2.107-8.239-2.95l-10.329-3.034c-6.559-1.939-11.751-4.706-15.577-8.302-3.825-3.596-5.738-8.302-5.738-14.117 0-4.832 1.271-9.046 3.812-12.642 2.569-3.624 6.012-6.433 10.329-8.428C296.249 12.011 301.1 11 306.456 11c5.41 0 10.22.997 14.428 2.992 4.208 1.966 7.542 4.663 10.001 8.09 2.487 3.428 3.799 7.32 3.935 11.674h-9.837ZM126 12.18v86.303h30.332c6.613 0 11.983-1.011 16.109-3.034 4.126-2.023 7.146-4.762 9.059-8.218 1.912-3.455 2.869-7.346 2.869-11.672 0-4.551-.875-8.4-2.623-11.547-1.749-3.146-3.922-5.562-6.518-7.248-2.596-1.685-5.178-2.612-7.747-2.781v-.843a22.47 22.47 0 0 0 6.682-3.118c2.076-1.405 3.743-3.315 5-5.731 1.285-2.416 1.927-5.478 1.927-9.187 0-4.214-.929-8.049-2.788-11.504-1.858-3.484-4.686-6.25-8.484-8.302-3.799-2.079-8.622-3.118-14.47-3.118H126Zm30.332 77.032h-20.167V59.208h20.659c3.662 0 6.832.759 9.509 2.276 2.678 1.489 4.742 3.483 6.19 5.984 1.448 2.472 2.172 5.169 2.172 8.09 0 3.793-1.407 7.024-4.222 9.693-2.787 2.64-7.501 3.961-14.141 3.961Zm-1.311-39.106h-18.856V21.451h19.183c5.575 0 9.647 1.334 12.215 4.003 2.569 2.641 3.853 5.857 3.853 9.65 0 3.034-.738 5.675-2.213 7.923-1.449 2.247-3.416 3.989-5.903 5.225-2.459 1.236-5.219 1.854-8.279 1.854Zm38.837 48.377h10.657l8.44-24.441h33.947l8.44 24.44h10.657L235.175 12.18h-10.493l-30.824 86.303Zm49.843-33.712-13.445-38.938h-.655l-13.445 38.938h27.545Zm108.98-52.591v86.303H404v-9.27h-41.153v-29.33h37.874v-9.271h-37.874V21.45h40.497v-9.27h-50.663Z" fill="#2151F5"/>
+</svg>

icons/testnet.svg

+<svg viewBox="0 0 37 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.467 5.14v.62H4v-.62h2.467ZM4.719 4h.731v4.537c0 .207.03.362.09.465.062.101.14.17.236.205.097.033.2.05.307.05.08 0 .146-.005.198-.013l.124-.025.149.657a1.529 1.529 0 0 1-.545.087c-.207 0-.41-.045-.608-.133a1.207 1.207 0 0 1-.49-.406c-.128-.182-.192-.412-.192-.688V4ZM9.512 10c-.459 0-.854-.101-1.187-.304a2.039 2.039 0 0 1-.766-.855c-.177-.368-.266-.796-.266-1.283 0-.488.089-.917.266-1.29.18-.373.43-.665.75-.873.323-.211.699-.316 1.129-.316.247 0 .492.04.734.123.242.083.462.217.66.403.198.184.356.428.474.732s.177.677.177 1.122v.31h-3.67v-.633h2.926c0-.268-.054-.508-.161-.719a1.214 1.214 0 0 0-.452-.499 1.267 1.267 0 0 0-.688-.182c-.292 0-.544.072-.757.216-.21.143-.373.329-.486.558-.114.23-.17.476-.17.738v.421c0 .36.061.665.185.915.126.248.3.437.524.567.223.128.482.192.778.192.192 0 .366-.027.52-.08.158-.056.293-.139.406-.249.114-.111.202-.25.264-.415l.707.199c-.075.24-.2.45-.375.632-.176.18-.393.32-.651.421-.258.1-.549.149-.871.149ZM15.967 6.207l-.657.186a1.219 1.219 0 0 0-.182-.32.888.888 0 0 0-.323-.26 1.17 1.17 0 0 0-.524-.102c-.29 0-.534.067-.728.201-.192.132-.288.3-.288.505 0 .182.066.326.198.431.133.106.34.193.62.264l.707.173c.425.103.743.261.951.474.209.211.313.483.313.815 0 .273-.078.517-.235.732a1.562 1.562 0 0 1-.651.508 2.377 2.377 0 0 1-.973.186c-.486 0-.888-.105-1.206-.316-.318-.21-.52-.519-.604-.924l.694-.173c.066.256.191.448.375.576.186.128.429.192.728.192.341 0 .612-.072.812-.217.203-.146.304-.322.304-.526a.554.554 0 0 0-.174-.416c-.115-.113-.293-.198-.533-.254l-.793-.186c-.436-.103-.756-.263-.96-.48a1.163 1.163 0 0 1-.304-.821c0-.269.075-.507.226-.713a1.54 1.54 0 0 1 .623-.487c.264-.118.564-.176.899-.176.47 0 .84.103 1.109.31.27.206.463.479.576.818ZM19.226 5.14v.62h-2.467v-.62h2.466ZM17.477 4h.73v4.537c0 .207.03.362.09.465.063.101.141.17.236.205.098.033.2.05.307.05.08 0 .147-.005.198-.013l.124-.025.15.657a1.528 1.528 0 0 1-.545.087c-.208 0-.41-.045-.609-.133a1.207 1.207 0 0 1-.49-.406c-.127-.182-.192-.412-.192-.688V4ZM21.057 7.037v2.864h-.731V5.14h.706v.743h.062a1.36 1.36 0 0 1 .508-.582c.228-.15.521-.223.88-.223.323 0 .605.066.847.198.241.13.43.328.564.595.134.264.201.6.201 1.004v3.025h-.731V6.926c0-.374-.097-.666-.291-.874-.195-.211-.461-.316-.8-.316-.233 0-.442.05-.626.151a1.087 1.087 0 0 0-.43.444c-.106.194-.159.43-.159.706ZM27.427 10c-.459 0-.855-.101-1.187-.304a2.038 2.038 0 0 1-.766-.855c-.177-.368-.266-.796-.266-1.283 0-.488.089-.917.266-1.29.18-.373.43-.665.75-.873.323-.211.698-.316 1.128-.316.248 0 .493.04.735.123.241.083.462.217.66.403.198.184.356.428.474.732s.177.677.177 1.122v.31h-3.67v-.633h2.926c0-.268-.054-.508-.161-.719a1.214 1.214 0 0 0-.453-.499 1.267 1.267 0 0 0-.688-.182c-.291 0-.543.072-.756.216-.21.143-.373.329-.486.558a1.64 1.64 0 0 0-.17.738v.421c0 .36.061.665.185.915.126.248.3.437.524.567.223.128.482.192.778.192.192 0 .365-.027.52-.08.157-.056.293-.139.406-.249.114-.111.202-.25.264-.415l.706.199c-.074.24-.199.45-.375.632-.175.18-.392.32-.65.421-.259.1-.549.149-.871.149ZM32.58 5.14v.62h-2.466v-.62h2.467ZM30.834 4h.731v4.537c0 .207.03.362.09.465.062.101.14.17.236.205.097.033.199.05.306.05.08 0 .147-.005.199-.013l.124-.025.148.657a1.528 1.528 0 0 1-.546.087c-.206 0-.408-.045-.607-.133a1.207 1.207 0 0 1-.49-.406c-.127-.182-.191-.412-.191-.688V4Z" fill="currentColor"/>
+  <rect x=".2" y=".2" width="36.267" height="13.6" rx="3.8" stroke="currentColor" stroke-width=".4"/>
+</svg>

lib/networks/networkAssets.ts

@@ -4,6 +4,7 @@ import type { PreDefinedNetwork } from 'types/networks';
 
 import arbitrumIcon from 'icons/networks/icons/arbitrum.svg';
 import artisIcon from 'icons/networks/icons/artis.svg';
+import baseIcon from 'icons/networks/icons/base.svg';
 import ethereumClassicIcon from 'icons/networks/icons/ethereum-classic.svg';
 import ethereumIcon from 'icons/networks/icons/ethereum.svg';
 import gnosisIcon from 'icons/networks/icons/gnosis.svg';
@@ -14,6 +15,7 @@ import poaIcon from 'icons/networks/icons/poa.svg';
 import rskIcon from 'icons/networks/icons/rsk.svg';
 import artisLogo from 'icons/networks/logos/artis.svg';
 import astarLogo from 'icons/networks/logos/astar.svg';
+import baseLogo from 'icons/networks/logos/base.svg';
 import etcLogo from 'icons/networks/logos/etc.svg';
 import ethLogo from 'icons/networks/logos/eth.svg';
 import gnosisLogo from 'icons/networks/logos/gnosis.svg';
@@ -86,6 +88,10 @@ const networkAssets: Partial<Record<PreDefinedNetwork, NetworkAssets>> = {
     logo: goerliLogo,
     icon: goerliIcon,
   },
+  base_goerli: {
+    logo: baseLogo,
+    icon: baseIcon,
+  },
 };
 
 export default networkAssets;

package.json

@@ -12,7 +12,7 @@
     "dev:local": "./node_modules/.bin/dotenv -e ./configs/envs/.env.localhost -e ./configs/envs/.env.secrets next dev | ./node_modules/.bin/pino-pretty",
     "dev:poa_core": "./node_modules/.bin/dotenv -e ./configs/envs/.env.poa_core -e ./configs/envs/.env.common -e ./configs/envs/.env.secrets next dev | ./node_modules/.bin/pino-pretty",
     "dev:goerli": "./node_modules/.bin/dotenv -e ./configs/envs/.env.goerli -e ./configs/envs/.env.common -e ./configs/envs/.env.secrets next dev | ./node_modules/.bin/pino-pretty",
-    "dev:goerli:l2test": "./node_modules/.bin/dotenv -e ./configs/envs/.env.goerli.l2test -e ./configs/envs/.env.common -e ./configs/envs/.env.secrets next dev | ./node_modules/.bin/pino-pretty",
+    "dev:goerli:optimism": "./node_modules/.bin/dotenv -e ./configs/envs/.env.goerli.optimism -e ./configs/envs/.env.common -e ./configs/envs/.env.secrets next dev | ./node_modules/.bin/pino-pretty",
     "build": "next build",
     "build:docker": "docker build --build-arg GIT_COMMIT_SHA=$(git rev-parse HEAD) -t blockscout ./",
     "start": "next start",

types/networks.ts

@@ -3,7 +3,7 @@ import type { FunctionComponent, SVGAttributes } from 'react';
 export type NetworkGroup = 'mainnets' | 'testnets' | 'other';
 
 export type PreDefinedNetwork = 'xdai_mainnet' | 'xdai_optimism' | 'xdai_aox' | 'eth_mainnet' | 'etc_mainnet' | 'poa_core' |
-'rsk_mainnet' | 'xdai_testnet' | 'poa_sokol' | 'artis_sigma1' | 'lukso_l14' | 'astar' | 'shiden' | 'shibuya' | 'goerli';
+'rsk_mainnet' | 'xdai_testnet' | 'poa_sokol' | 'artis_sigma1' | 'lukso_l14' | 'astar' | 'shiden' | 'shibuya' | 'goerli' | 'base_goerli';
 
 export interface FeaturedNetwork {
   title: string;

ui/pages/Home.tsx

@@ -28,10 +28,10 @@ const Home = () => {
             as="h1"
             size={{ base: 'md', lg: 'xl' }}
             lineHeight={{ base: '32px', lg: '50px' }}
-            fontWeight={ 500 }
+            fontWeight={ 600 }
             color="white"
           >
-            Welcome to Blockscout explorer
+            Welcome to { appConfig.network.name } explorer
           </Heading>
           <Flex
             alignItems="center"

ui/snippets/header/Burger.tsx

@@ -2,6 +2,7 @@ import { Icon, Box, Flex, Drawer, DrawerOverlay, DrawerContent, DrawerBody, useC
 import React from 'react';
 
 import burgerIcon from 'icons/burger.svg';
+import testnetIcon from 'icons/testnet.svg';
 import NavigationMobile from 'ui/snippets/navigation/NavigationMobile';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import NetworkMenuButton from 'ui/snippets/networkMenu/NetworkMenuButton';
@@ -41,6 +42,7 @@ const Burger = () => {
         <DrawerOverlay/>
         <DrawerContent maxWidth="260px">
           <DrawerBody p={ 6 } display="flex" flexDirection="column">
+            <Icon as={ testnetIcon } h="14px" w="auto" color="red.400" alignSelf="flex-start"/>
             <Flex alignItems="center" justifyContent="space-between">
               <NetworkLogo onClick={ handleNetworkLogoClick }/>
               <NetworkMenuButton

ui/snippets/navigation/NavigationDesktop.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import appConfig from 'configs/app/config';
 import chevronIcon from 'icons/arrows/east-mini.svg';
+import testnetIcon from 'icons/testnet.svg';
 import { useAppContext } from 'lib/appContext';
 import * as cookies from 'lib/cookies';
 import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
@@ -60,6 +61,7 @@ const NavigationDesktop = () => {
       width={{ lg: isExpanded ? '229px' : '92px', xl: isCollapsed ? '92px' : '229px' }}
       { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
     >
+      <Icon as={ testnetIcon } h="14px" w="auto" color="red.400" pl={ 3 } alignSelf="flex-start"/>
       <Box
         as="header"
         display="flex"