Merge branch 'main' into blocks-time-ago

.env.template

-NEXT_PUBLIC_SUPPORTED_NETWORKS=APP_NEXT_NEXT_PUBLIC_SUPPORTED_NETWORKS
-NEXT_PUBLIC_BLOCKSCOUT_VERSION=APP_NEXT_NEXT_PUBLIC_BLOCKSCOUT_VERSION
-NEXT_PUBLIC_FOOTER_GITHUB_LINK=APP_NEXT_NEXT_PUBLIC_FOOTER_GITHUB_LINK
-NEXT_PUBLIC_FOOTER_TWITTER_LINK=APP_NEXT_NEXT_PUBLIC_FOOTER_TWITTER_LINK
-NEXT_PUBLIC_FOOTER_TELEGRAM_LINK=APP_NEXT_NEXT_PUBLIC_FOOTER_TELEGRAM_LINK
-NEXT_PUBLIC_FOOTER_STAKING_LINK=APP_NEXT_NEXT_PUBLIC_FOOTER_STAKING_LINK
-NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=APP_NEXT_NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM
-NEXT_PUBLIC_SENTRY_DSN=APP_NEXT_NEXT_PUBLIC_SENTRY_DSN
-NEXT_PUBLIC_APP_INSTANCE=APP_NEXT_NEXT_PUBLIC_APP_INSTANCE
-NEXT_PUBLIC_NETWORK_NAME=APP_NEXT_NEXT_PUBLIC_NETWORK_NAME
-NEXT_PUBLIC_NETWORK_SHORT_NAME=APP_NEXT_NEXT_PUBLIC_NETWORK_SHORT_NAME
-NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME=APP_NEXT_NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME
-NEXT_PUBLIC_NETWORK_TYPE=APP_NEXT_NEXT_PUBLIC_NETWORK_TYPE
-NEXT_PUBLIC_NETWORK_SUBTYPE=APP_NEXT_NEXT_PUBLIC_NETWORK_SUBTYPE
-NEXT_PUBLIC_NETWORK_ID=APP_NEXT_NEXT_PUBLIC_NETWORK_ID
-NEXT_PUBLIC_NETWORK_CURRENCY=APP_NEXT_NEXT_PUBLIC_NETWORK_CURRENCY
-NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS=APP_NEXT_NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS
-NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=APP_NEXT_NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED
-NEXT_PUBLIC_FEATURED_NETWORKS=APP_NEXT_NEXT_PUBLIC_FEATURED_NETWORKS
-NEXT_PUBLIC_APP_PROTOCOL=APP_NEXT_NEXT_PUBLIC_APP_PROTOCOL
-NEXT_PUBLIC_APP_HOST=APP_NEXT_NEXT_PUBLIC_APP_HOST
-NEXT_PUBLIC_APP_PORT=APP_NEXT_NEXT_PUBLIC_APP_PORT
-NEXT_PUBLIC_API_ENDPOINT=APP_NEXT_NEXT_PUBLIC_API_ENDPOINT
-NEXT_PUBLIC_API_BASE_PATH=APP_NEXT_NEXT_PUBLIC_API_BASE_PATH
+# app config
+NEXT_PUBLIC_APP_INSTANCE=__PLACEHOLDER_FOR_NEXT_PUBLIC_APP_INSTANCE__
+NEXT_PUBLIC_APP_PROTOCOL=__PLACEHOLDER_FOR_NEXT_PUBLIC_APP_PROTOCOL__
+NEXT_PUBLIC_APP_HOST=__PLACEHOLDER_FOR_NEXT_PUBLIC_APP_HOST__
+NEXT_PUBLIC_APP_PORT=__PLACEHOLDER_FOR_NEXT_PUBLIC_APP_PORT__
+
+# network config
+NEXT_PUBLIC_NETWORK_NAME=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_NAME__
+NEXT_PUBLIC_NETWORK_SHORT_NAME=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_SHORT_NAME__
+NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME__
+NEXT_PUBLIC_NETWORK_TYPE=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_TYPE__
+NEXT_PUBLIC_NETWORK_SUBTYPE=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_SUBTYPE__
+NEXT_PUBLIC_NETWORK_ID=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_ID__
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_CURRENCY_NAME__
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL__
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS__
+NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS__
+NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=__PLACEHOLDER_FOR_NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED__
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE
+
+# ui config
+NEXT_PUBLIC_BLOCKSCOUT_VERSION=__PLACEHOLDER_FOR_NEXT_PUBLIC_BLOCKSCOUT_VERSION__
+NEXT_PUBLIC_FOOTER_GITHUB_LINK=__PLACEHOLDER_FOR_NEXT_PUBLIC_FOOTER_GITHUB_LINK__
+NEXT_PUBLIC_FOOTER_TWITTER_LINK=__PLACEHOLDER_FOR_NEXT_PUBLIC_FOOTER_TWITTER_LINK__
+NEXT_PUBLIC_FOOTER_TELEGRAM_LINK=__PLACEHOLDER_FOR_NEXT_PUBLIC_FOOTER_TELEGRAM_LINK__
+NEXT_PUBLIC_FOOTER_STAKING_LINK=__PLACEHOLDER_FOR_NEXT_PUBLIC_FOOTER_STAKING_LINK__
+NEXT_PUBLIC_FEATURED_NETWORKS=__PLACEHOLDER_FOR_NEXT_PUBLIC_FEATURED_NETWORKS__
+NEXT_PUBLIC_NETWORK_EXPLORERS=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_EXPLORERS__
+NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=__PLACEHOLDER_FOR_NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM__
+
+# api config
+NEXT_PUBLIC_API_ENDPOINT=__PLACEHOLDER_FOR_NEXT_PUBLIC_API_ENDPOINT__
+NEXT_PUBLIC_API_BASE_PATH=__PLACEHOLDER_FOR_NEXT_PUBLIC_API_BASE_PATH__
+
+# external services config
+NEXT_PUBLIC_SENTRY_DSN=__PLACEHOLDER_FOR_NEXT_PUBLIC_SENTRY_DSN__
+
+

.github/workflows/publish-docker-image-and-deploy.yml

@@ -56,7 +56,7 @@ jobs:
     needs: push_to_registry
     uses: blockscout/blockscout-ci-cd/.github/workflows/deploy.yaml@master
     with:
-      valuesDir: deploy/values/review
+      valuesDir: deploy/values/main
       appNamespace: front-main
       blockscoutIngressHost: blockscout
       frontendIngressHost: frontend

README.md

-[Design](https://www.figma.com/file/07zoJSAP7Vo655ertmlppA/My_Account?node-id=279%3A1006) | [API Doc](https://github.com/blockscout/blockscout-account/blob/account/apps/block_scout_web/API.md) | [Swagger](https://app.swaggerhub.com/apis/NIKITOSING4/blockscout-account-api/1.0)
+[Design](https://www.figma.com/file/07zoJSAP7Vo655ertmlppA/My_Account?node-id=279%3A1006) | [API Doc](https://github.com/blockscout/blockscout-account/blob/account/apps/block_scout_web/API.md) | [Core Swagger](https://app.swaggerhub.com/apis/NIKITOSING4/CoreBlockScoutAPI/1.0.0) | [Account Swagger](https://app.swaggerhub.com/apis/NIKITOSING4/blockscout-account-api/1.0)
 
 -----
 ## Technology stack
@@ -47,7 +47,9 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_NETWORK_TYPE | `string` | Network type (used as first part of the base path) | `xdai` |
 | NEXT_PUBLIC_NETWORK_SUBTYPE | `string` | Network subtype (used as second part of the base path) | `mainnet` |
 | NEXT_PUBLIC_NETWORK_ID | `number` | Chain id, see [https://chainlist.org/](https://chainlist.org/) for the reference | `99` |
-| NEXT_PUBLIC_NETWORK_CURRENCY | `string` | Network currency symbol | `xDAI` |
+| NEXT_PUBLIC_NETWORK_CURRENCY_NAME | `string` | Network currency name | `Ether` |
+| NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL | `string` | Network currency symbol | `ETH` |
+| NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS | `string` | Network currency decimals | `18` |
 | NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS | `string` | Address of network's native token | `0x029a799563238d0e75e20be2f4bda0ea68d00172` |
 | NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME | `string` *(optional)* | Network name for constructing url of token logos according to template `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/${assetsNamePath}/assets/${tokenAddress}/logo.png`. It should match network name in TrustWallet assets repo, see the full list [here](https://github.com/trustwallet/assets/tree/master/blockchains). If not provided, the network type will be used as its assets path part | `ethereum` |
 | 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` |
@@ -66,6 +68,8 @@ The app instance could be customized by passing following variables to NodeJS en
 | NEXT_PUBLIC_FOOTER_TELEGRAM_LINK | `string` *(optional)* | Link to Telegram in the footer | `https://t.me/poa_network` |
 | NEXT_PUBLIC_FOOTER_STAKING_LINK | `string` *(optional)* | Link to staking dashboard in the footer | `https://duneanalytics.com/maxaleks/xdai-staking` |
 | NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM | `string` | Link to form where authors can submit their dapps to the marketplace | `https://airtable.com/shrqUAcjgGJ4jU88C` |
+| NEXT_PUBLIC_NETWORK_EXPLORERS | `Array<NetworkExplorer>` where `NetworkExplorer` can have following [properties](#network-explorer-configuration-properties) | Used to build up links to transactions, blocks, addresses in other chain explorers.  | `[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/tx'}}]` |
+| NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE | `validation` or `mining` *(optional)* | Verification type in the network | `mining` |
 
 ### App configuration
 
@@ -93,9 +97,33 @@ The app instance could be customized by passing following variables to NodeJS en
 | group | `mainnets \| testnets \| other` | Indicates in which tab network appears in the menu | `'mainnets'` |
 | icon | `string` *(optional)* | Network icon; if not provided, will fallback to  icon predefined in the project; if the project doesn't have icon for such network then the common placeholder will be shown; *Note* that icon size should be 30px by 30px | `'https://www.fillmurray.com/60/60'` |
 
+### Network explorer configuration properties
+
+| Property | Type | Description | Example value
+| --- | --- | --- | --- |
+| title | `string` | Displayed name of the explorer | `'Anyblock'` |
+| baseUrl | `string` | Base url of the explorer | `'https://explorer.anyblock.tools'` |
+| paths | `Record<'tx' \| 'block' \| 'address', string>` | Map of explorer entities and their paths | `'paths':{'tx':'/ethereum/poa/core/tx'}` |
+
+*Note* The url of an entity will be constructed as `<baseUrl><paths[<entity-type>]><entity-id>`, e.g `https://explorer.anyblock.tools/ethereum/poa/core/tx/<tx-id>`
+
 ### External services configuration
 
 | Variable | Type | Description | Default value
 | --- | --- | --- | --- |
 | NEXT_PUBLIC_SENTRY_DSN | `string` *(optional)* | Client key for your Senty.io app | `<secret>` |
 | SENTRY_CSP_REPORT_URI | `string` *(optional)* | URL for sending CSP-reports to your Senty.io app | `<secret>` |
+
+### 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.
+
+These are the steps that you have to follow to make everything work:
+- create the variable placeholder for build-time in file `.env.template`; this is the most important step, without this the app will not receive any variables that are passed at run-time
+- for local development purposes add the variable to either `configs/envs/.env.common` or `configs/envs/.env.<network>` files depending on if the variable has the same value for all network or specific value for each network
+- add the variable to CI configs
+    - `deploy/values/review/values.yaml` - review environment
+    - `deploy/values/main/values.yaml` - production environment
+    - `deploy/values/e2e/values.yaml` - e2e-test environment
+
+Keep in mind that all json-like values should be single-quoted, e.g `[{'foo': 'bar'}]`

configs/app/config.ts

@@ -8,6 +8,8 @@ const baseUrl = [
   process.env.NEXT_PUBLIC_APP_PORT ? ':' + process.env.NEXT_PUBLIC_APP_PORT : '',
 ].join('');
 
+const DEFAULT_CURRENCY_DECIMALS = 18;
+
 const config = Object.freeze({
   env,
   isDev,
@@ -18,10 +20,16 @@ const config = Object.freeze({
     name: process.env.NEXT_PUBLIC_NETWORK_NAME,
     id: process.env.NEXT_PUBLIC_NETWORK_ID,
     shortName: process.env.NEXT_PUBLIC_NETWORK_SHORT_NAME,
-    currency: process.env.NEXT_PUBLIC_NETWORK_CURRENCY,
+    currency: {
+      name: process.env.NEXT_PUBLIC_NETWORK_CURRENCY_NAME,
+      symbol: process.env.NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL,
+      decimals: Number(process.env.NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS) || DEFAULT_CURRENCY_DECIMALS,
+    },
     assetsPathname: process.env.NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME,
     nativeTokenAddress: process.env.NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS,
     basePath: '/' + [ process.env.NEXT_PUBLIC_NETWORK_TYPE, process.env.NEXT_PUBLIC_NETWORK_SUBTYPE ].filter(Boolean).join('/'),
+    explorers: process.env.NEXT_PUBLIC_NETWORK_EXPLORERS?.replaceAll('\'', '"'),
+    verificationType: process.env.NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE || 'mining',
   },
   footerLinks: {
     github: process.env.NEXT_PUBLIC_FOOTER_GITHUB_LINK,

configs/envs/.env.common

@@ -4,13 +4,11 @@ NEXT_PUBLIC_APP_HOST=localhost
 NEXT_PUBLIC_APP_PORT=3000
 NEXT_PUBLIC_APP_INSTANCE=local
 
-# nav and footer config
+# ui config
 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_FEATURED_NETWORKS=[{'title':'Gnosis Chain','basePath':'/xdai/mainnet','group':'mainnets'}]
-
-# marketplace config
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/shrqUAcjgGJ4jU88C
 
 # api config

configs/envs/.env.poa_core

-# nav and footer config
+# ui config
 NEXT_PUBLIC_FOOTER_TELEGRAM_LINK=https://t.me/poa_network
 NEXT_PUBLIC_FOOTER_STAKING_LINK=https://duneanalytics.com/maxaleks/xdai-staking
 NEXT_PUBLIC_FEATURED_NETWORKS=[{'title':'Gnosis Chain','basePath':'/xdai/mainnet','group':'mainnets'},{'title':'Optimism on Gnosis Chain','basePath':'/xdai/optimism','group':'mainnets','icon':'https://www.fillmurray.com/60/60'},{'title':'Arbitrum on xDai','basePath':'/xdai/aox','group':'mainnets'},{'title':'Ethereum','basePath':'/eth/mainnet','group':'mainnets'},{'title':'Ethereum Classic','basePath':'/etx/mainnet','group':'mainnets'},{'title':'POA','basePath':'/poa/core','group':'mainnets'},{'title':'RSK','basePath':'/rsk/mainnet','group':'mainnets'},{'title':'Gnosis Chain Testnet','basePath':'/xdai/testnet','group':'testnets'},{'title':'POA Sokol','basePath':'/poa/sokol','group':'testnets'},{'title':'ARTIS Σ1','basePath':'/artis/sigma1','group':'other'},{'title':'LUKSO L14','basePath':'/lukso/l14','group':'other'},{'title':'Astar','basePath':'/astar','group':'other'}]
+NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/tx'}}]
 
-# current network config
+# network config
 NEXT_PUBLIC_NETWORK_NAME=POA
 NEXT_PUBLIC_NETWORK_SHORT_NAME=POA
 NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME=poa
 NEXT_PUBLIC_NETWORK_TYPE=poa
 NEXT_PUBLIC_NETWORK_SUBTYPE=core
 NEXT_PUBLIC_NETWORK_ID=99
-NEXT_PUBLIC_NETWORK_CURRENCY=POA
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=POA
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=POA
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
 NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS=0x029a799563238d0e75e20be2f4bda0ea68d00172
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
+NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
 
 # api config
 NEXT_PUBLIC_API_BASE_PATH=/poa/core

deploy/values/e2e/values.yaml

@@ -309,8 +309,14 @@ frontend:
       _default: sokol
     NEXT_PUBLIC_NETWORK_ID:
       _default: 77
-    NEXT_PUBLIC_NETWORK_CURRENCY:
+    NEXT_PUBLIC_NETWORK_CURRENCY_NAME:
+      _default: POA Network Sokol
+    NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL:
       _default: SPOA
+    NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS:
+      _default: 18
+    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE:
+      _default: validation
     NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED:
       _default: 'true'
     NEXT_PUBLIC_FEATURED_NETWORKS:

deploy/values/main/.sops.yaml

+
+---
+creation_rules:
+  - path_regex: ^(.+/)?secrets\.yaml$
+    pgp: >-
+      99E83B7490B1A9F51781E6055317CE0D5CE1230B

deploy/values/main/values.yaml

+global:
+  env: e2e
+# enable Blockscout deploy
+blockscout:
+  enabled: true
+  image:
+    _default: blockscout/blockscout:latest
+  replicas:
+    app: 1
+  docker:
+    port: 80
+    targetPort: 4000
+  service:
+    # ClusterIP, NodePort or LoadBalancer
+    type: ClusterIP
+  # enable ingress
+  ingress:
+    enabled: true
+    host:
+      _default: blockscout.test.blockscout.aws-k8s.blockscout.com
+    # enable https
+    tls:
+      enabled: true
+  # probes
+  livenessProbe:
+    enabled: true
+    path: /
+  readinessProbe:
+    enabled: true
+    path: /
+  resources:
+    limits:
+      memory:
+        _default: "1Gi"
+      cpu:
+        _default: "2"
+    requests:
+      memory:
+        _default: "1Gi"
+      cpu:
+        _default: "2"
+  # enable service to connect to RDS
+  rds:
+    enable: false
+    endpoint:
+      _default: <endpoint>.<region>.rds.amazonaws.com
+  # node label
+  nodeSelector:
+    enabled: true
+    app: blockscout
+  # Blockscout environment variables
+  environment:
+    ENV:
+      _default: test
+    RESOURCE_MODE:
+      _default: account
+    PUBLIC:
+      _default: 'false'
+    PORT:
+      _default: 4000
+    PORT_PG:
+      _default: 5432
+    PORT_NETWORK_HTTP:
+      _default: 8545
+    PORT_NETWORK_WS:
+      _default: 8546
+    ETHEREUM_JSONRPC_VARIANT:
+      _default: geth
+    ETHEREUM_JSONRPC_TRACE_URL:
+      _default: http://geth-svc:8545
+    ETHEREUM_JSONRPC_HTTP_URL:
+      _default: http://geth-svc:8545
+    ETHEREUM_JSONRPC_WS_URL:
+      _default: ws://geth-svc:8546
+    COIN:
+      _default: DAI
+    MIX_ENV:
+      _default: prod
+    ECTO_USE_SSL:
+      _default: 'false'
+    RUST_VERIFICATION_SERVICE_URL:
+      _default: http://sc-verifier-svc:8043
+    ACCOUNT_ENABLED:
+      _default: true
+    DISABLE_REALTIME_INDEXER:
+      _default: 'false'
+    SOCKET_ROOT:
+      _default: "/"
+    NETWORK_PATH:
+      _default: "/"
+    ETHEREUM_JSONRPC_DISABLE_ARCHIVE_BALANCES:
+      _default: 'true'
+
+postgres:
+  enabled: true
+  image: postgres:13.8
+  port: 5432
+
+  command: '["docker-entrypoint.sh", "-c"]'
+  args: '["max_connections=300"]'
+
+  resources:
+    limits:
+      memory:
+        _default: "1Gi"
+      cpu:
+        _default: "1"
+    requests:
+      memory:
+        _default: "1Gi"
+      cpu:
+        _default: "1"
+
+  environment:
+    POSTGRES_USER:
+      _default: 'postgres'
+    POSTGRES_HOST_AUTH_METHOD:
+      _default: 'trust'
+# enable geth deploy
+geth:
+  enabled: true
+  image:
+    _default: ethereum/client-go:stable
+  replicas:
+    app: 1
+  portHttp: 8545
+  portWs: 8546
+  portAuth: 8551
+  command: '["sh","./root/init.sh"]'
+  args: '["--fakepow", "--dev", "--dev.period=1", "--datadir=/root/.ethereum/devnet", "--keystore=/root/.ethereum/devnet/keystore", "--password=/root/password.txt", "--unlock=0", "--unlock=1", "--mine", "--miner.threads=1", "--miner.etherbase=0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266", "--ipcpath=/root/geth.ipc", "--http", "--http.vhosts=*", "--http.addr=0.0.0.0", "--http.port=8545", "--http.api=eth,net,web3,debug,txpool", "--ws", "--ws.origins=*", "--ws.addr=0.0.0.0", "--ws.port=8546", "--ws.api=eth,net,web3,debug,txpool", "--graphql", "--graphql.corsdomain=*", "--allow-insecure-unlock", "--rpc.allow-unprotected-txs", "--http.corsdomain=*", "--vmdebug", "--networkid=1337", "--rpc.txfeecap=0"]'
+  environment: {}
+  persistence:
+    enabled: false
+  resources:
+    limits:
+      memory:
+        _default: "2Gi"
+      cpu:
+        _default: "0.2"
+    requests:
+      memory:
+        _default: "2Gi"
+      cpu:
+        _default: "0.2"
+  # node label
+  nodeSelector:
+    enabled: true
+    app: blockscout
+  service:
+    # ClusterIP, NodePort or LoadBalancer
+    type: ClusterIP
+  # enable ingress
+  ingress:
+    enabled: true
+    host:
+      _default: asdfg-node.test.blockscout.aws-k8s.blockscout.com
+    # enable https
+    tls:
+      enabled: false
+  jwt:
+    enabled: false
+  files:
+    enabled: true
+# enable Smart-contract-verifier deploy
+scVerifier:
+  enabled: true
+  image:
+    _default: ghcr.io/blockscout/smart-contract-verifier:latest
+  replicas:
+    app: 1
+  docker:
+    port: 80
+    targetPort: 8043
+    metricsPort: 6060
+  service:
+    # ClusterIP, NodePort or LoadBalancer
+    type: ClusterIP
+  # enable ingress
+  ingress:
+    enabled: true
+    host:
+      _default: verifier.test.blockscout.aws-k8s.blockscout.com
+      testnet: asdfg-verifier.test.blockscout.aws-k8s.blockscout.com
+    # enable https
+    tls:
+      enabled: true
+  resources:
+    limits:
+      memory:
+        _default: "0.5Gi"
+      cpu:
+        _default: "0.25"
+    requests:
+      memory:
+        _default: "0.5Gi"
+      cpu:
+        _default: "0.25"
+  # node label
+  nodeSelector:
+    enabled: true
+    app: blockscout
+  # probes
+  livenessProbe:
+    enabled: true
+    path: /health
+  readinessProbe:
+    enabled: true
+    path: /health
+  # enable Horizontal Pod Autoscaler
+  hpa:
+    enabled: true
+    minReplicas: 1
+    maxReplicas: 10
+    cpuTarget: 90
+  environment:
+    SMART_CONTRACT_VERIFIER__SERVER__ADDR:
+      _default: 0.0.0.0:8043
+    # SMART_CONTRACT_VERIFIER__SOLIDITY__ENABLED:
+    #   _default: 'true'
+    SMART_CONTRACT_VERIFIER__SOLIDITY__COMPILERS_DIR:
+      _default: /tmp/solidity-compilers
+    SMART_CONTRACT_VERIFIER__SOLIDITY__REFRESH_VERSIONS_SCHEDULE:
+      _default: 0 0 * * * * *
+    # It depends on the OS you are running the service on
+    # SMART_CONTRACT_VERIFIER__SOLIDITY__FETCHER__LIST__LIST_URL:
+    #   _default: https://solc-bin.ethereum.org/linux-amd64/list.json
+    #SMART_CONTRACT_VERIFIER__SOLIDITY__FETCHER__LIST__LIST_URL=https://solc-bin.ethereum.org/macosx-amd64/list.json
+    #SMART_CONTRACT_VERIFIER__SOLIDITY__FETCHER__LIST__LIST_URL=https://solc-bin.ethereum.org/windows-amd64/list.json
+    SMART_CONTRACT_VERIFIER__SOLIDITY__FETCHER__S3__REGION:
+      _default: ""
+    SMART_CONTRACT_VERIFIER__SOLIDITY__FETCHER__S3__ENDPOINT:
+      _default: https://storage.googleapis.com
+    SMART_CONTRACT_VERIFIER__SOURCIFY__ENABLED:
+      _default: 'true'
+    SMART_CONTRACT_VERIFIER__SOURCIFY__API_URL:
+      _default: https://sourcify.dev/server/
+    SMART_CONTRACT_VERIFIER__SOURCIFY__VERIFICATION_ATTEMPTS:
+      _default: 3
+    SMART_CONTRACT_VERIFIER__SOURCIFY__REQUEST_TIMEOUT:
+      _default: 10
+    SMART_CONTRACT_VERIFIER__METRICS__ENABLED:
+      _default: 'true'
+    SMART_CONTRACT_VERIFIER__METRICS__ADDR:
+      _default: 0.0.0.0:6060
+    SMART_CONTRACT_VERIFIER__METRICS__ROUTE:
+      _default: /metrics
+    SMART_CONTRACT_VERIFIER__JAEGER__ENABLED:
+      _default: 'false'
+frontend:
+  enabled: true
+  image:
+    _default: ghcr.io/blockscout/frontend:main
+  replicas:
+    app: 1
+  docker:
+    port: 80
+    targetPort: 3000
+  ingress:
+    enabled: true
+    host:
+      _default: frontend.test.blockscout.aws-k8s.blockscout.com
+      testnet: asdfg-frontend.test.blockscout.aws-k8s.blockscout.com
+    # enable https
+    tls:
+      enabled: true
+  resources:
+    limits:
+      memory:
+        _default: "0.3Gi"
+      cpu:
+        _default: "0.2"
+    requests:
+      memory:
+        _default: "0.3Gi"
+      cpu:
+        _default: "0.2"
+  # node label
+  nodeSelector:
+    enabled: true
+    app: blockscout
+  environment:
+    NEXT_PUBLIC_APP_PORT:
+        _default: 80
+    NEXT_PUBLIC_BLOCKSCOUT_VERSION:
+      _default: v4.1.8-beta
+    NEXT_PUBLIC_FOOTER_GITHUB_LINK:
+      _default: https://github.com/blockscout/blockscout
+    NEXT_PUBLIC_FOOTER_TWITTER_LINK:
+      _default: https://www.twitter.com/blockscoutcom
+    NEXT_PUBLIC_APP_INSTANCE:
+      _default: review
+    NEXT_PUBLIC_FOOTER_TELEGRAM_LINK:
+      _default: https://t.me/poa_network
+    NEXT_PUBLIC_FOOTER_STAKING_LINK:
+      _default: https://duneanalytics.com/maxaleks/xdai-staking
+    NEXT_PUBLIC_NETWORK_NAME:
+      _default: Sokol
+    NEXT_PUBLIC_NETWORK_SHORT_NAME:
+      _default: POA
+    NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME:
+      _default: sokol
+    NEXT_PUBLIC_NETWORK_TYPE:
+      _default: poa
+    NEXT_PUBLIC_NETWORK_SUBTYPE:
+      _default: sokol
+    NEXT_PUBLIC_NETWORK_ID:
+      _default: 77
+    NEXT_PUBLIC_NETWORK_CURRENCY_NAME:
+      _default: POA Network Sokol
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL:
+      _default: SPOA
+    NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS:
+      _default: 18
+    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE:
+      _default: validation
+    NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED:
+      _default: 'true'
+    NEXT_PUBLIC_FEATURED_NETWORKS:
+      _default: "[{'title':'Gnosis Chain','basePath':'/xdai/mainnet','group':'mainnets'},{'title':'Optimism on Gnosis Chain','basePath':'/xdai/optimism','group':'mainnets','icon':'https://www.fillmurray.com/60/60'},{'title':'Arbitrum on xDai','basePath':'/xdai/aox','group':'mainnets'},{'title':'Ethereum','basePath':'/eth/mainnet','group':'mainnets'},{'title':'Ethereum Classic','basePath':'/etx/mainnet','group':'mainnets'},{'title':'POA','basePath':'/poa/core','group':'mainnets'},{'title':'RSK','basePath':'/rsk/mainnet','group':'mainnets'},{'title':'Gnosis Chain Testnet','basePath':'/xdai/testnet','group':'testnets'},{'title':'POA Sokol','basePath':'/poa/sokol','group':'testnets'},{'title':'ARTIS Σ1','basePath':'/artis/sigma1','group':'other'},{'title':'LUKSO L14','basePath':'/lukso/l14','group':'other'},{'title':'Astar','basePath':'/astar','group':'other'}]"
+    NEXT_PUBLIC_API_ENDPOINT:
+      _default: https://blockscout.com
+    NEXT_PUBLIC_API_BASE_PATH:
+      _default: /

deploy/values/review/values.yaml

@@ -305,8 +305,14 @@ frontend:
       _default: sokol
     NEXT_PUBLIC_NETWORK_ID:
       _default: 77
-    NEXT_PUBLIC_NETWORK_CURRENCY:
+    NEXT_PUBLIC_NETWORK_CURRENCY_NAME:
+      _default: POA Network Sokol
+    NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL:
       _default: SPOA
+    NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS:
+      _default: 18
+    NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE:
+      _default: validation
     NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED:
       _default: 'true'
     NEXT_PUBLIC_FEATURED_NETWORKS:

lib/hooks/useFetchProfileInfo.tsx

 import { useQuery } from '@tanstack/react-query';
 
 import type { UserInfo } from 'types/api/account';
+import { QueryKeys } from 'types/client/queries';
 
 import useFetch from 'lib/hooks/useFetch';
 
@@ -14,7 +15,7 @@ interface Error {
 export default function useFetchProfileInfo() {
   const fetch = useFetch();
 
-  return useQuery<unknown, Error, UserInfo>([ 'profile' ], async() => {
+  return useQuery<unknown, Error, UserInfo>([ QueryKeys.profile ], async() => {
     return fetch('/api/account/profile');
   }, {
     refetchOnMount: false,

lib/hooks/useIsMobile.tsx

 import { useBreakpointValue } from '@chakra-ui/react';
 
-export default function useIsMobile() {
-  return useBreakpointValue({ base: true, lg: false });
+export default function useIsMobile(ssr = true) {
+  return useBreakpointValue({ base: true, lg: false }, { ssr });
 }

lib/networks/getNetworkValidatorTitle.ts

+import appConfig from 'configs/app/config';
+
+export default function getNetworkValidatorTitle() {
+  return appConfig.network.verificationType === 'validation' ? 'validator' : 'miner';
+}

lib/networks/networkExplorers.ts

+import _compose from 'lodash/fp/compose';
+import _mapValues from 'lodash/mapValues';
+
+import type { NetworkExplorer } from 'types/networks';
+
+import appConfig from 'configs/app/config';
+
+// for easy .env update
+// const NETWORK_EXPLORERS = JSON.stringify([
+//   {
+//     title: 'Anyblock',
+//     baseUrl: 'https://explorer.anyblock.tools',
+//     paths: {
+//       tx: '/ethereum/poa/core/tx',
+//     },
+//   },
+// ]).replaceAll('"', '\'');
+
+function parseNetworkExplorers() {
+  try {
+    return JSON.parse(appConfig.network.explorers || '[]');
+  } catch (error) {
+    return [];
+  }
+}
+
+const stripTrailingSlash = (str: string) => str.at(-1) === '/' ? str.slice(0, -1) : str;
+const addLeadingSlash = (str: string) => str.at(0) === '/' ? str : '/' + str;
+
+const networkExplorers: Array<NetworkExplorer> = (() => {
+  const explorers: Array<NetworkExplorer> = parseNetworkExplorers();
+  return explorers.map((explorer) => ({
+    ...explorer,
+    baseUrl: stripTrailingSlash(explorer.baseUrl),
+    paths: _mapValues(explorer.paths, _compose(stripTrailingSlash, addLeadingSlash)),
+  }));
+})();
+
+export default networkExplorers;

pages/api/config/json-rpc-url.ts

+import handler from 'lib/api/handler';
+
+const getUrl = () => {
+  return `/v2/config/json-rpc-url`;
+};
+
+const requestHandler = handler(getUrl, [ 'GET' ]);
+
+export default requestHandler;

types/api/json-rpc-url.ts

+export type JsonRpcUrlResponse = {
+  json_rpc_url: string;
+}

types/client/accountQueries.ts

+export enum QueryKeys {
+  addressTags = 'address-tags',
+  apiKeys = 'api-keys',
+  block = 'block',
+  blocks = 'blocks',
+  customAbis = 'custom-abis',
+  profile = 'profile',
+  publicTags = 'public-tags',
+  transactionTags = 'transaction-tags',
+  watchlist = 'watchlist',
+}

types/client/queries.ts

+export enum QueryKeys {
+  csrf = 'csrf',
+  profile = 'profile',
+  transactionsPending = 'transactions_pending',
+  transactionsValidated = 'transactions_validated',
+  tx = 'tx',
+  txInternals = 'tx-internals',
+  txLog = 'tx-log',
+  txRawTrace = 'tx-raw-trace',
+}

types/networks.ts

@@ -8,3 +8,13 @@ export interface FeaturedNetwork {
   group: NetworkGroup;
   icon?: FunctionComponent<SVGAttributes<SVGElement>> | string;
 }
+
+export interface NetworkExplorer {
+  title: string;
+  baseUrl: string;
+  paths: {
+    tx: string;
+  };
+}
+
+export type NetworkVerificationType = 'mining' | 'validation';

ui/apiKey/ApiKeyModal/ApiKeyForm.tsx

@@ -12,6 +12,7 @@ import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 
 import type { ApiKey, ApiKeys, ApiKeyErrors } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import getErrorMessage from 'lib/getErrorMessage';
 import getPlaceholderWithError from 'lib/getPlaceholderWithError';
@@ -57,7 +58,7 @@ const ApiKeyForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
     onSuccess: async(data) => {
       const response = data as unknown as ApiKey;
 
-      queryClient.setQueryData([ 'api-keys' ], (prevData: ApiKeys | undefined) => {
+      queryClient.setQueryData([ QueryKeys.apiKeys ], (prevData: ApiKeys | undefined) => {
         const isExisting = prevData && prevData.some((item) => item.api_key === response.api_key);
 
         if (isExisting) {

ui/apiKey/DeleteApiKeyModal.tsx

@@ -3,6 +3,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
 
 import type { ApiKey, ApiKeys } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import DeleteModal from 'ui/shared/DeleteModal';
@@ -22,7 +23,7 @@ const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   }, [ data.api_key, fetch ]);
 
   const onSuccess = useCallback(async() => {
-    queryClient.setQueryData([ 'api-keys' ], (prevData: ApiKeys | undefined) => {
+    queryClient.setQueryData([ QueryKeys.apiKeys ], (prevData: ApiKeys | undefined) => {
       return prevData?.filter((item) => item.api_key !== data.api_key);
     });
   }, [ data, queryClient ]);

ui/apps/CategoriesMenu.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import type { MarketplaceCategoriesIds, MarketplaceCategory } from 'types/client/apps';
 
+import marketplaceApps from 'data/marketplaceApps.json';
 import eastMiniArrowIcon from 'icons/arrows/east-mini.svg';
 
 import CategoriesMenuItem from './CategoriesMenuItem';
@@ -20,6 +21,10 @@ type Props = {
 
 const CategoriesMenu = ({ selectedCategoryId, onSelect }: Props) => {
   const selectedCategory = categoriesList.find(category => category.id === selectedCategoryId);
+  const actualCategories = marketplaceApps.map(app => app.categories).flat();
+  const displayedCategories = categoriesList.filter(category => category.id === 'all' ||
+      category.id === 'favorites' ||
+      actualCategories.includes(category.id));
 
   return (
     <Menu>
@@ -43,7 +48,7 @@ const CategoriesMenu = ({ selectedCategoryId, onSelect }: Props) => {
       </MenuButton>
 
       <MenuList zIndex={ 3 }>
-        { categoriesList.map((category: MarketplaceCategory) => (
+        { displayedCategories.map((category: MarketplaceCategory) => (
           <CategoriesMenuItem
             key={ category.id }
             id={ category.id }

ui/block/BlockDetails.tsx

 import { Grid, GridItem, Text, Icon, Link, Box, Tooltip, Alert } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import BigNumber from 'bignumber.js';
+import capitalize from 'lodash/capitalize';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { scroller, Element } from 'react-scroll';
 
 import type { Block } from 'types/api/block';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import appConfig from 'configs/app/config';
 import clockIcon from 'icons/clock.svg';
@@ -17,6 +19,7 @@ import type { ErrorType } from 'lib/hooks/useFetch';
 import useFetch from 'lib/hooks/useFetch';
 import { space } from 'lib/html-entities';
 import link from 'lib/link/link';
+import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import BlockDetailsSkeleton from 'ui/block/details/BlockDetailsSkeleton';
 import AddressLink from 'ui/shared/address/AddressLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
@@ -34,7 +37,7 @@ const BlockDetails = () => {
   const fetch = useFetch();
 
   const { data, isLoading, isError, error } = useQuery<unknown, ErrorType<{ status: number }>, Block>(
-    [ 'block', router.query.id ],
+    [ QueryKeys.block, router.query.id ],
     async() => await fetch(`/api/blocks/${ router.query.id }`),
     {
       enabled: Boolean(router.query.id),
@@ -69,6 +72,8 @@ const BlockDetails = () => {
   const sectionGap = <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>;
   const { totalReward, staticReward, burntFees, txFees } = getBlockReward(data);
 
+  const validatorTitle = getNetworkValidatorTitle();
+
   return (
     <Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden">
       <DetailsInfoItem
@@ -109,12 +114,12 @@ const BlockDetails = () => {
         </Link>
       </DetailsInfoItem>
       <DetailsInfoItem
-        title="Mined by"
+        title={ appConfig.network.verificationType === 'validation' ? 'Validated by' : 'Mined by' }
         hint="A block producer who successfully included the block onto the blockchain."
         columnGap={ 1 }
       >
         <AddressLink hash={ data.miner.hash }/>
-        { data.miner.name && <Text>(Miner: { data.miner.name })</Text> }
+        { data.miner.name && <Text>{ `(${ capitalize(validatorTitle) }: ${ data.miner.name })` }</Text> }
         { /* api doesn't return the block processing time yet */ }
         { /* <Text>{ dayjs.duration(block.minedIn, 'second').humanize(true) }</Text> */ }
       </DetailsInfoItem>
@@ -122,12 +127,12 @@ const BlockDetails = () => {
         <DetailsInfoItem
           title="Block reward"
           hint={
-            `For each block, the miner is rewarded with a finite amount of ${ appConfig.network.currency || 'native token' } 
+            `For each block, the ${ validatorTitle } is rewarded with a finite amount of ${ appConfig.network.currency.symbol || 'native token' } 
           on top of the fees paid for all transactions in the block.`
           }
           columnGap={ 1 }
         >
-          <Text>{ totalReward.dividedBy(WEI).toFixed() } { appConfig.network.currency }</Text>
+          <Text>{ totalReward.dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol }</Text>
           { (!txFees.isEqualTo(ZERO) || !burntFees.isEqualTo(ZERO)) && (
             <Text variant="secondary" whiteSpace="break-spaces">(
               <Tooltip label="Static block reward">
@@ -180,7 +185,7 @@ const BlockDetails = () => {
           title="Base fee per gas"
           hint="Minimum fee required per unit of gas. Fee adjusts based on network congestion."
         >
-          <Text>{ BigNumber(data.base_fee_per_gas).dividedBy(WEI).toFixed() } { appConfig.network.currency } </Text>
+          <Text>{ BigNumber(data.base_fee_per_gas).dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol } </Text>
           <Text variant="secondary" whiteSpace="pre">
             { space }({ BigNumber(data.base_fee_per_gas).dividedBy(WEI_IN_GWEI).toFixed() } Gwei)
           </Text>
@@ -189,13 +194,13 @@ const BlockDetails = () => {
       <DetailsInfoItem
         title="Burnt fees"
         hint={
-          `Amount of ${ appConfig.network.currency || 'native token' } burned from transactions included in the block. 
+          `Amount of ${ appConfig.network.currency.symbol || 'native token' } burned from transactions included in the block.
 
           Equals Block Base Fee per Gas * Gas Used.`
         }
       >
         <Icon as={ flameIcon } boxSize={ 5 } color="gray.500"/>
-        <Text ml={ 1 }>{ burntFees.dividedBy(WEI).toFixed() } { appConfig.network.currency }</Text>
+        <Text ml={ 1 }>{ burntFees.dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol }</Text>
         { !txFees.isEqualTo(ZERO) && (
           <Tooltip label="Burnt fees / Txn fees * 100%">
             <Box>
@@ -212,13 +217,13 @@ const BlockDetails = () => {
           title="Priority fee / Tip"
           hint="User-defined tips sent to validator for transaction priority/inclusion."
         >
-          { BigNumber(data.priority_fee).dividedBy(WEI).toFixed() } { appConfig.network.currency }
+          { BigNumber(data.priority_fee).dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol }
         </DetailsInfoItem>
       ) }
       { /* api doesn't support extra data yet */ }
       { /* <DetailsInfoItem
         title="Extra data"
-        hint="Any data that can be included by the miner in the block."
+        hint={ `Any data that can be included by the ${ validatorTitle } in the block.` }
       >
         <Text whiteSpace="pre">{ data.extra_data } </Text>
         <Text variant="secondary">(Hex: { data.extra_data })</Text>
@@ -247,7 +252,7 @@ const BlockDetails = () => {
 
           <DetailsInfoItem
             title="Difficulty"
-            hint="Block difficulty for miner, used to calibrate block generation time."
+            hint={ `Block difficulty for ${ validatorTitle }, used to calibrate block generation time.` }
           >
             { BigNumber(data.difficulty).toFormat() }
           </DetailsInfoItem>
@@ -299,9 +304,10 @@ const BlockDetails = () => {
               <DetailsInfoItem
                 key={ type }
                 title={ type }
-                hint="Amount of distributed reward. Miners receive a static block reward + Tx fees + uncle fees."
+                // is this text correct for validators?
+                hint={ `Amount of distributed reward. ${ capitalize(validatorTitle) }s receive a static block reward + Tx fees + uncle fees.` }
               >
-                { BigNumber(reward).dividedBy(WEI).toFixed() } { appConfig.network.currency }
+                { BigNumber(reward).dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol }
               </DetailsInfoItem>
             )) }
         </>

ui/block/BlockTxs.tsx

 import React from 'react';
 
-import TxsContent from 'ui/txs/TxsContent';
+import TxsWithSort from 'ui/txs/TxsWithSort';
 
 const BlockTxs = () => {
-  return <TxsContent showDescription={ false } showSortButton={ false } txs={ [] }/>;
+  return (
+    // <TxsContent
+    //   showDescription={ false }
+    //   showSortButton={ false }
+    //   txs={ [] }
+    //   page={ 1 }
+    //   // eslint-disable-next-line react/jsx-no-bind
+    //   onNextPageClick={ () => {} }
+    //   // eslint-disable-next-line react/jsx-no-bind
+    //   onPrevPageClick={ () => {} }
+    // />
+    // eslint-disable-next-line react/jsx-no-bind
+    <TxsWithSort txs={ [] } sort={ () => () => {} }/>
+  );
 };
 
 export default BlockTxs;

ui/blocks/BlocksContent.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
 import type { BlockType, BlocksResponse } from 'types/api/block';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import BlocksList from 'ui/blocks/BlocksList';
@@ -20,7 +21,7 @@ const BlocksContent = ({ type }: Props) => {
   const fetch = useFetch();
 
   const { data, isLoading, isError } = useQuery<unknown, unknown, BlocksResponse>(
-    [ 'blocks', type ],
+    [ QueryKeys.blocks, type ],
     async() => await fetch(`/api/blocks${ type ? `?type=${ type }` : '' }`),
   );
 
@@ -52,7 +53,8 @@ const BlocksContent = ({ type }: Props) => {
       <Show below="lg" key="content-mobile"><BlocksList data={ data.items }/></Show>
       <Show above="lg" key="content-desktop"><BlocksTable data={ data.items }/></Show>
       <Box mx={{ base: 0, lg: 6 }} my={{ base: 6, lg: 3 }}>
-        <Pagination currentPage={ 1 }/>
+        { /* eslint-disable-next-line react/jsx-no-bind */ }
+        <Pagination currentPage={ 1 } onNextPageClick={ () => {} } onPrevPageClick={ () => {} } hasNextPage/>
       </Box>
     </>
   );

ui/blocks/BlocksListItem.tsx

 import { Flex, Link, Spinner, Text, Box, Icon, useColorModeValue } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
+import capitalize from 'lodash/capitalize';
 import React from 'react';
 
 import type { Block } from 'types/api/block';
@@ -10,6 +11,7 @@ import getBlockReward from 'lib/block/getBlockReward';
 import { WEI } from 'lib/consts';
 import link from 'lib/link/link';
 import BlockTimestamp from 'ui/blocks/BlockTimestamp';
+import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AddressLink from 'ui/shared/address/AddressLink';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
@@ -44,7 +46,7 @@ const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
         <Text variant="secondary">{ data.size.toLocaleString('en') } bytes</Text>
       </Flex>
       <Flex columnGap={ 2 }>
-        <Text fontWeight={ 500 }>Miner</Text>
+        <Text fontWeight={ 500 }>{ capitalize(getNetworkValidatorTitle()) }</Text>
         <AddressLink alias={ data.miner.name } hash={ data.miner.hash } truncation="constant"/>
       </Flex>
       <Flex columnGap={ 2 }>
@@ -60,7 +62,7 @@ const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
         </Flex>
       </Box>
       <Flex columnGap={ 2 }>
-        <Text fontWeight={ 500 }>Reward { appConfig.network.currency }</Text>
+        <Text fontWeight={ 500 }>Reward { appConfig.network.currency.symbol }</Text>
         <Text variant="secondary">{ totalReward.div(WEI).toFixed() }</Text>
       </Flex>
       <Flex>

ui/blocks/BlocksTable.tsx

 import { Table, Thead, Tbody, Tr, Th, TableContainer } from '@chakra-ui/react';
+import capitalize from 'lodash/capitalize';
 import React from 'react';
 
 import type { Block } from 'types/api/block';
 
 import appConfig from 'configs/app/config';
+import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import BlocksTableItem from 'ui/blocks/BlocksTableItem';
 
 interface Props {
@@ -19,11 +21,11 @@ const BlocksTable = ({ data }: Props) => {
           <Tr>
             <Th width="125px">Block</Th>
             <Th width="120px">Size</Th>
-            <Th width="21%" minW="144px">Miner</Th>
+            <Th width="21%" minW="144px">{ capitalize(getNetworkValidatorTitle()) }</Th>
             <Th width="64px" isNumeric>Txn</Th>
             <Th width="35%">Gas used</Th>
-            <Th width="22%">Reward { appConfig.network.currency }</Th>
-            <Th width="22%">Burnt fees { appConfig.network.currency }</Th>
+            <Th width="22%">Reward { appConfig.network.currency.symbol }</Th>
+            <Th width="22%">Burnt fees { appConfig.network.currency.symbol }</Th>
           </Tr>
         </Thead>
         <Tbody>

ui/customAbi/CustomAbiModal/CustomAbiForm.tsx

@@ -13,6 +13,7 @@ import type { ControllerRenderProps, SubmitHandler } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 
 import type { CustomAbi, CustomAbis, CustomAbiErrors } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import getErrorMessage from 'lib/getErrorMessage';
 import getPlaceholderWithError from 'lib/getPlaceholderWithError';
@@ -63,7 +64,7 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
   const mutation = useMutation(customAbiKey, {
     onSuccess: (data) => {
       const response = data as unknown as CustomAbi;
-      queryClient.setQueryData([ 'custom-abis' ], (prevData: CustomAbis | undefined) => {
+      queryClient.setQueryData([ QueryKeys.customAbis ], (prevData: CustomAbis | undefined) => {
         const isExisting = prevData && prevData.some((item) => item.id === response.id);
 
         if (isExisting) {

ui/customAbi/DeleteCustomAbiModal.tsx

@@ -3,6 +3,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
 
 import type { CustomAbi, CustomAbis } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import DeleteModal from 'ui/shared/DeleteModal';
 
@@ -21,7 +22,7 @@ const DeleteCustomAbiModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   }, [ data ]);
 
   const onSuccess = useCallback(async() => {
-    queryClient.setQueryData([ 'custom-abis' ], (prevData: CustomAbis | undefined) => {
+    queryClient.setQueryData([ QueryKeys.customAbis ], (prevData: CustomAbis | undefined) => {
       return prevData?.filter((item) => item.id !== data.id);
     });
   }, [ data, queryClient ]);

ui/pages/ApiKeys.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
 import type { ApiKey, ApiKeys } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -30,7 +31,7 @@ const ApiKeysPage: React.FC = () => {
   const [ apiKeyModalData, setApiKeyModalData ] = useState<ApiKey>();
   const [ deleteModalData, setDeleteModalData ] = useState<ApiKey>();
 
-  const { data, isLoading, isError } = useQuery<unknown, unknown, ApiKeys>([ 'api-keys' ], async() => await fetch('/api/account/api-keys'));
+  const { data, isLoading, isError } = useQuery<unknown, unknown, ApiKeys>([ QueryKeys.apiKeys ], async() => await fetch('/api/account/api-keys'));
 
   const onEditClick = useCallback((data: ApiKey) => {
     setApiKeyModalData(data);

ui/pages/Apps.tsx

 import { Box, Icon, Link } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
+import type { JsonRpcUrlResponse } from 'types/api/json-rpc-url';
+
 import config from 'configs/app/config';
 import PlusIcon from 'icons/plus.svg';
+import useFetch from 'lib/hooks/useFetch';
 import AppList from 'ui/apps/AppList';
 import AppListSkeleton from 'ui/apps/AppListSkeleton';
 import CategoriesMenu from 'ui/apps/CategoriesMenu';
@@ -11,6 +15,8 @@ import FilterInput from 'ui/shared/FilterInput';
 import useMarketplaceApps from '../apps/useMarkeplaceApps';
 
 const Apps = () => {
+  const fetch = useFetch();
+
   const {
     isLoading,
     category,
@@ -24,6 +30,11 @@ const Apps = () => {
     handleFavoriteClick,
   } = useMarketplaceApps();
 
+  useQuery<unknown, unknown, JsonRpcUrlResponse>(
+    [ 'json-rpc-url' ],
+    async() => await fetch(`/api/config/json-rpc-url`),
+  );
+
   return (
     <>
       <Box

ui/pages/CustomAbi.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
 import type { CustomAbi, CustomAbis } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -27,7 +28,7 @@ const CustomAbiPage: React.FC = () => {
   const [ customAbiModalData, setCustomAbiModalData ] = useState<CustomAbi>();
   const [ deleteModalData, setDeleteModalData ] = useState<CustomAbi>();
 
-  const { data, isLoading, isError } = useQuery<unknown, unknown, CustomAbis>([ 'custom-abis' ], async() => await fetch('/api/account/custom-abis'));
+  const { data, isLoading, isError } = useQuery<unknown, unknown, CustomAbis>([ QueryKeys.customAbis ], async() => await fetch('/api/account/custom-abis'));
 
   const onEditClick = useCallback((data: CustomAbi) => {
     setCustomAbiModalData(data);

ui/pages/MarketplaceApp.tsx

 import { Box, Center, useColorMode } from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
+import type { JsonRpcUrlResponse } from 'types/api/json-rpc-url';
 import type { AppItemOverview } from 'types/client/apps';
 
 import appConfig from 'configs/app/config';
+import useFetch from 'lib/hooks/useFetch';
 import link from 'lib/link/link';
 import ContentLoader from 'ui/shared/ContentLoader';
 import Page from 'ui/shared/Page/Page';
@@ -15,30 +18,43 @@ type Props = {
 
 const MarketplaceApp = ({ app, isLoading }: Props) => {
   const [ isFrameLoading, setIsFrameLoading ] = useState(isLoading);
-  const ref = useRef<HTMLIFrameElement>(null);
   const { colorMode } = useColorMode();
+  const fetch = useFetch();
+  const ref = useRef<HTMLIFrameElement>(null);
 
   const handleIframeLoad = useCallback(() => {
     setIsFrameLoading(false);
   }, []);
 
-  const sandboxAttributeValue = 'allow-forms allow-orientation-lock ' +
-        'allow-pointer-lock allow-popups-to-escape-sandbox ' +
-        'allow-same-origin allow-scripts ' +
-        'allow-top-navigation-by-user-activation allow-popups';
-
-  const allowAttributeValue = 'clipboard-read; clipboard-write;';
+  const { data: jsonRpcUrlResponse } = useQuery<unknown, unknown, JsonRpcUrlResponse>(
+    [ 'json-rpc-url' ],
+    async() => await fetch(`/api/config/json-rpc-url`),
+    { refetchOnMount: false },
+  );
 
   useEffect(() => {
     if (app && !isFrameLoading) {
-      ref?.current?.contentWindow?.postMessage({
+      const message = {
         blockscoutColorMode: colorMode,
-        blockscoutChainId: Number(appConfig.network.id),
+        blockscoutRootUrl: link('network_index'),
         blockscoutAddressExplorerUrl: link('address_index'),
         blockscoutTransactionExplorerUrl: link('tx'),
-      }, app.url);
+        blockscoutNetworkName: appConfig.network.name,
+        blockscoutNetworkId: Number(appConfig.network.id),
+        blockscoutNetworkCurrency: appConfig.network.currency,
+        blockscoutNetworkRpc: jsonRpcUrlResponse?.json_rpc_url,
+      };
+
+      ref?.current?.contentWindow?.postMessage(message, app.url);
     }
-  }, [ isFrameLoading, app, colorMode, ref ]);
+  }, [ isFrameLoading, app, colorMode, ref, jsonRpcUrlResponse ]);
+
+  const sandboxAttributeValue = 'allow-forms allow-orientation-lock ' +
+      'allow-pointer-lock allow-popups-to-escape-sandbox ' +
+      'allow-same-origin allow-scripts ' +
+      'allow-top-navigation-by-user-activation allow-popups';
+
+  const allowAttributeValue = 'clipboard-read; clipboard-write;';
 
   return (
     <Page wrapChildren={ false }>

ui/pages/Transaction.tsx

 import { Flex, Link, Icon } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
 import eastArrowIcon from 'icons/arrows/east.svg';
 import link from 'lib/link/link';
+import networkExplorers from 'lib/networks/networkExplorers';
 import ExternalLink from 'ui/shared/ExternalLink';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -25,6 +27,15 @@ const TABS: Array<RoutedTab> = [
 ];
 
 const TransactionPageContent = () => {
+  const router = useRouter();
+
+  const explorersLinks = networkExplorers
+    .filter((explorer) => explorer.paths.tx)
+    .map((explorer) => {
+      const url = new URL(explorer.paths.tx + '/' + router.query.id, explorer.baseUrl);
+      return <ExternalLink key={ explorer.baseUrl } title={ `Open in ${ explorer.title }` } href={ url.toString() }/>;
+    });
+
   return (
     <Page>
       { /* TODO should be shown only when navigating from txs list */ }
@@ -34,6 +45,7 @@ const TransactionPageContent = () => {
       </Link>
       <Flex alignItems="flex-start" flexDir={{ base: 'column', lg: 'row' }}>
         <PageTitle text="Transaction details"/>
+        { explorersLinks.length > 0 && (
           <Flex
             alignItems="center"
             flexWrap="wrap"
@@ -43,10 +55,9 @@ const TransactionPageContent = () => {
             mb={{ base: 6, lg: 'initial' }}
             py={ 2.5 }
           >
-          <ExternalLink title="Open in Tenderly" href="#"/>
-          <ExternalLink title="Open in Blockchair" href="#"/>
-          <ExternalLink title="Open in Etherscan" href="#"/>
+            { explorersLinks }
           </Flex>
+        ) }
       </Flex>
       <RoutedTabs
         tabs={ TABS }

ui/pages/Transactions.tsx

@@ -5,18 +5,18 @@ import React from 'react';
 
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
+import appConfig from 'configs/app/config';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
-import TxsPending from 'ui/txs/TxsPending';
-import TxsValidated from 'ui/txs/TxsValidated';
-
-const TABS: Array<RoutedTab> = [
-  { id: 'validated', title: 'Validated', component: <TxsValidated/> },
-  { id: 'pending', title: 'Pending', component: <TxsPending/> },
-];
+import TxsTab from 'ui/txs/TxsTab';
 
 const Transactions = () => {
+  const verifiedTitle = appConfig.network.verificationType === 'validation' ? 'Validated' : 'Mined';
+  const TABS: Array<RoutedTab> = [
+    { id: 'validated', title: verifiedTitle, component: <TxsTab tab="validated"/> },
+    { id: 'pending', title: 'Pending', component: <TxsTab tab="pending"/> },
+  ];
 
   return (
     <Page>

ui/pages/Watchlist.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
 import type { TWatchlist, TWatchlistItem } from 'types/client/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -19,7 +20,7 @@ import WatchlistTable from 'ui/watchlist/WatchlistTable/WatchlistTable';
 
 const WatchList: React.FC = () => {
   const { data, isLoading, isError } =
-    useQuery<unknown, unknown, TWatchlist>([ 'watchlist' ], async() => fetch('/api/account/watchlist/get-with-tokens'));
+    useQuery<unknown, unknown, TWatchlist>([ QueryKeys.watchlist ], async() => fetch('/api/account/watchlist/get-with-tokens'));
 
   const addressModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();

ui/privateTags/AddressModal/AddressForm.tsx

@@ -9,6 +9,7 @@ import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 
 import type { AddressTag, AddressTagErrors } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import getErrorMessage from 'lib/getErrorMessage';
 import type { ErrorType } from 'lib/hooks/useFetch';
@@ -70,7 +71,7 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
       }
     },
     onSuccess: () => {
-      queryClient.refetchQueries([ 'address-tags' ]).then(() => {
+      queryClient.refetchQueries([ QueryKeys.addressTags ]).then(() => {
         onClose();
         setPending(false);
       });

ui/privateTags/DeletePrivateTagModal.tsx

@@ -3,6 +3,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
 
 import type { AddressTag, TransactionTag, AddressTags, TransactionTags } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import DeleteModal from 'ui/shared/DeleteModal';
@@ -27,11 +28,11 @@ const DeletePrivateTagModal: React.FC<Props> = ({ isOpen, onClose, data, type })
 
   const onSuccess = useCallback(async() => {
     if (type === 'address') {
-      queryClient.setQueryData([ 'address-tags' ], (prevData: AddressTags | undefined) => {
+      queryClient.setQueryData([ QueryKeys.addressTags ], (prevData: AddressTags | undefined) => {
         return prevData?.filter((item: AddressTag) => item.id !== id);
       });
     } else {
-      queryClient.setQueryData([ 'transaction-tags' ], (prevData: TransactionTags | undefined) => {
+      queryClient.setQueryData([ QueryKeys.transactionTags ], (prevData: TransactionTags | undefined) => {
         return prevData?.filter((item: TransactionTag) => item.id !== id);
       });
     }

ui/privateTags/PrivateAddressTags.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
 import type { AddressTags, AddressTag } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -18,7 +19,7 @@ import DeletePrivateTagModal from './DeletePrivateTagModal';
 
 const PrivateAddressTags = () => {
   const { data: addressTagsData, isLoading, isError } =
-    useQuery<unknown, unknown, AddressTags>([ 'address-tags' ], async() => fetch('/api/account/private-tags/address'), { refetchOnMount: false });
+    useQuery<unknown, unknown, AddressTags>([ QueryKeys.addressTags ], async() => fetch('/api/account/private-tags/address'), { refetchOnMount: false });
 
   const addressModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();

ui/privateTags/PrivateTransactionTags.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
 import type { TransactionTags, TransactionTag } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -18,7 +19,10 @@ import TransactionTagTable from './TransactionTagTable/TransactionTagTable';
 
 const PrivateTransactionTags = () => {
   const { data: transactionTagsData, isLoading, isError } =
-    useQuery<unknown, unknown, TransactionTags>([ 'transaction-tags' ], async() => fetch('/api/account/private-tags/transaction'), { refetchOnMount: false });
+    useQuery<unknown, unknown, TransactionTags>(
+      [ QueryKeys.transactionTags ],
+      async() => fetch('/api/account/private-tags/transaction'), { refetchOnMount: false },
+    );
 
   const transactionModalProps = useDisclosure();
   const deleteModalProps = useDisclosure();

ui/privateTags/TransactionModal/TransactionForm.tsx

@@ -9,6 +9,7 @@ import type { SubmitHandler, ControllerRenderProps } from 'react-hook-form';
 import { useForm, Controller } from 'react-hook-form';
 
 import type { TransactionTag, TransactionTagErrors } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import getErrorMessage from 'lib/getErrorMessage';
 import type { ErrorType } from 'lib/hooks/useFetch';
@@ -70,7 +71,7 @@ const TransactionForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) =>
       }
     },
     onSuccess: () => {
-      queryClient.refetchQueries([ 'transaction-tags' ]).then(() => {
+      queryClient.refetchQueries([ QueryKeys.transactionTags ]).then(() => {
         onClose();
         setPending(false);
       });

ui/publicTags/DeletePublicTagModal.tsx

@@ -4,6 +4,7 @@ import React, { useCallback, useState } from 'react';
 import type { ChangeEvent } from 'react';
 
 import type { PublicTags, PublicTag } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import DeleteModal from 'ui/shared/DeleteModal';
@@ -32,7 +33,7 @@ const DeletePublicTagModal: React.FC<Props> = ({ isOpen, onClose, data, onDelete
 
   const onSuccess = useCallback(async() => {
     onDeleteSuccess();
-    queryClient.setQueryData([ 'public-tags' ], (prevData: PublicTags | undefined) => {
+    queryClient.setQueryData([ QueryKeys.publicTags ], (prevData: PublicTags | undefined) => {
       return prevData?.filter((item) => item.id !== data.id);
     });
   }, [ queryClient, data, onDeleteSuccess ]);

ui/publicTags/PublicTagsData.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import React, { useCallback, useState } from 'react';
 
 import type { PublicTags, PublicTag } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -26,7 +27,7 @@ const PublicTagsData = ({ changeToFormScreen, onTagDelete }: Props) => {
   const isMobile = useIsMobile();
   const fetch = useFetch();
 
-  const { data, isLoading, isError } = useQuery<unknown, unknown, PublicTags>([ 'public-tags' ], async() => await fetch('/api/account/public-tags'));
+  const { data, isLoading, isError } = useQuery<unknown, unknown, PublicTags>([ QueryKeys.publicTags ], async() => await fetch('/api/account/public-tags'));
 
   const onDeleteModalClose = useCallback(() => {
     setDeleteModalData(undefined);

ui/publicTags/PublicTagsForm/PublicTagsForm.tsx

@@ -12,6 +12,7 @@ import type { FieldError, Path, SubmitHandler } from 'react-hook-form';
 import { useForm, useFieldArray } from 'react-hook-form';
 
 import type { PublicTags, PublicTag, PublicTagNew, PublicTagErrors } from 'types/api/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import getErrorMessage from 'lib/getErrorMessage';
 import type { ErrorType } from 'lib/hooks/useFetch';
@@ -108,7 +109,7 @@ const PublicTagsForm = ({ changeToDataScreen, data }: Props) => {
     onSuccess: async(data) => {
       const response = data as unknown as PublicTag;
 
-      queryClient.setQueryData([ 'public-tags' ], (prevData: PublicTags | undefined) => {
+      queryClient.setQueryData([ QueryKeys.publicTags ], (prevData: PublicTags | undefined) => {
         const isExisting = prevData && prevData.some((item) => item.id === response.id);
 
         if (isExisting) {

ui/shared/Page/Page.tsx

@@ -2,6 +2,8 @@ import { Flex } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
+import { QueryKeys } from 'types/client/queries';
+
 import useFetch from 'lib/hooks/useFetch';
 import PageContent from 'ui/shared/Page/PageContent';
 import Header from 'ui/snippets/header/Header';
@@ -15,7 +17,7 @@ interface Props {
 const Page = ({ children, wrapChildren = true }: Props) => {
   const fetch = useFetch();
 
-  useQuery<unknown, unknown, unknown>([ 'csrf' ], async() => await fetch('/api/account/csrf'));
+  useQuery<unknown, unknown, unknown>([ QueryKeys.csrf ], async() => await fetch('/api/account/csrf'));
 
   const renderedChildren = wrapChildren ? (
     <PageContent>{ children }</PageContent>

ui/shared/Pagination.tsx

-import { Button, Flex, Input, Icon, IconButton } from '@chakra-ui/react';
+import { Button, Flex, Icon, IconButton } from '@chakra-ui/react';
 import React from 'react';
 
 import arrowIcon from 'icons/arrows/east-mini.svg';
@@ -6,11 +6,14 @@ import arrowIcon from 'icons/arrows/east-mini.svg';
 type Props = {
   currentPage: number;
   maxPage?: number;
+  onNextPageClick: () => void;
+  onPrevPageClick: () => void;
+  hasNextPage: boolean;
 }
 
 const MAX_PAGE_DEFAULT = 50;
 
-const Pagination = ({ currentPage, maxPage }: Props) => {
+const Pagination = ({ currentPage, maxPage, onNextPageClick, onPrevPageClick, hasNextPage }: Props) => {
   const pageNumber = (
     <Flex alignItems="center">
       <Button
@@ -25,6 +28,7 @@ const Pagination = ({ currentPage, maxPage }: Props) => {
       >
         { currentPage }
       </Button>
+      { /* max page will be removed */ }
           of
       <Button
         variant="outline"
@@ -50,25 +54,30 @@ const Pagination = ({ currentPage, maxPage }: Props) => {
       <Flex alignItems="center" justifyContent="space-between" w={{ base: '100%', lg: 'auto' }}>
         <IconButton
           variant="outline"
+          onClick={ onPrevPageClick }
           size="sm"
           aria-label="Next page"
           w="36px"
           icon={ <Icon as={ arrowIcon } w={ 5 } h={ 5 }/> }
           mr={ 8 }
+          disabled={ currentPage === 1 }
         />
         { pageNumber }
         <IconButton
           variant="outline"
+          onClick={ onNextPageClick }
           size="sm"
           aria-label="Next page"
           w="36px"
           icon={ <Icon as={ arrowIcon } w={ 5 } h={ 5 } transform="rotate(180deg)"/> }
           ml={ 8 }
+          disabled={ !hasNextPage }
         />
       </Flex>
-      <Flex alignItems="center" width="132px" ml={ 16 } display={{ base: 'none', lg: 'flex' }}>
+      { /* not implemented yet */ }
+      { /* <Flex alignItems="center" width="132px" ml={ 16 } display={{ base: 'none', lg: 'flex' }}>
             Go to <Input w="84px" size="xs" ml={ 2 }/>
-      </Flex>
+      </Flex> */ }
     </Flex>
 
   );

ui/shared/RoutedTabs/RoutedTabsMenu.tsx

@@ -14,7 +14,7 @@ import { menuButton } from './utils';
 
 interface Props {
   tabs: Array<RoutedTab | MenuButton>;
-  activeTab: RoutedTab;
+  activeTab?: RoutedTab;
   tabsCut: number;
   isActive: boolean;
   styles?: StyleProps;
@@ -52,7 +52,7 @@ const RoutedTabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRe
               key={ tab.id }
               variant="ghost"
               onClick={ handleItemClick }
-              isActive={ activeTab.id === tab.id }
+              isActive={ activeTab ? activeTab.id === tab.id : false }
               justifyContent="left"
               data-index={ index }
             >

ui/tx/TxDetails.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 import { scroller, Element } from 'react-scroll';
 
 import type { Transaction } from 'types/api/transaction';
+import { QueryKeys } from 'types/client/queries';
 
 import appConfig from 'configs/app/config';
 import clockIcon from 'icons/clock.svg';
@@ -47,7 +48,7 @@ const TxDetails = () => {
   const fetch = useFetch();
 
   const { data, isLoading, isError } = useQuery<unknown, unknown, Transaction>(
-    [ 'tx', router.query.id ],
+    [ QueryKeys.tx, router.query.id ],
     async() => await fetch(`/api/transactions/${ router.query.id }`),
     {
       enabled: Boolean(router.query.id),
@@ -184,7 +185,7 @@ const TxDetails = () => {
         title="Value"
         hint="Value sent in the native token (and USD) if applicable."
       >
-        <CurrencyValue value={ data.value } currency={ appConfig.network.currency } exchangeRate={ data.exchange_rate }/>
+        <CurrencyValue value={ data.value } currency={ appConfig.network.currency.symbol } exchangeRate={ data.exchange_rate }/>
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Transaction fee"
@@ -192,7 +193,7 @@ const TxDetails = () => {
       >
         <CurrencyValue
           value={ data.fee.value }
-          currency={ appConfig.network.currency }
+          currency={ appConfig.network.currency.symbol }
           exchangeRate={ data.exchange_rate }
           flexWrap="wrap"
         />
@@ -201,7 +202,7 @@ const TxDetails = () => {
         title="Gas price"
         hint="Price per unit of gas specified by the sender. Higher gas prices can prioritize transaction inclusion during times of high usage."
       >
-        <Text mr={ 1 }>{ BigNumber(data.gas_price).dividedBy(WEI).toFixed() } { appConfig.network.currency }</Text>
+        <Text mr={ 1 }>{ BigNumber(data.gas_price).dividedBy(WEI).toFixed() } { appConfig.network.currency.symbol }</Text>
         <Text variant="secondary">({ BigNumber(data.gas_price).dividedBy(WEI_IN_GWEI).toFixed() } Gwei)</Text>
       </DetailsInfoItem>
       <DetailsInfoItem
@@ -244,12 +245,12 @@ const TxDetails = () => {
       { data.tx_burnt_fee && (
         <DetailsInfoItem
           title="Burnt fees"
-          hint={ `Amount of ${ appConfig.network.currency } burned for this transaction. Equals Block Base Fee per Gas * Gas Used.` }
+          hint={ `Amount of ${ appConfig.network.currency.symbol } burned for this transaction. Equals Block Base Fee per Gas * Gas Used.` }
         >
           <Icon as={ flameIcon } mr={ 1 } boxSize={ 5 } color="gray.500"/>
           <CurrencyValue
             value={ String(data.tx_burnt_fee) }
-            currency={ appConfig.network.currency }
+            currency={ appConfig.network.currency.symbol }
             exchangeRate={ data.exchange_rate }
             flexWrap="wrap"
           />

ui/tx/TxInternals.tsx

@@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { InternalTransactionsResponse, TxInternalsType, InternalTransaction } from 'types/api/internalTransaction';
+import { QueryKeys } from 'types/client/queries';
 
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -73,7 +74,7 @@ const TxInternals = () => {
   const [ searchTerm, setSearchTerm ] = React.useState<string>('');
   const [ sort, setSort ] = React.useState<Sort>();
   const { data, isLoading, isError } = useQuery<unknown, unknown, InternalTransactionsResponse>(
-    [ 'tx-internals', router.query.id ],
+    [ QueryKeys.txInternals, router.query.id ],
     async() => await fetch(`/api/transactions/${ router.query.id }/internal-transactions`),
     {
       enabled: Boolean(router.query.id),

ui/tx/TxLogs.tsx

@@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { LogsResponse } from 'types/api/log';
+import { QueryKeys } from 'types/client/queries';
 
 import useFetch from 'lib/hooks/useFetch';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
@@ -15,7 +16,7 @@ const TxLogs = () => {
   const fetch = useFetch();
 
   const { data, isLoading, isError } = useQuery<unknown, unknown, LogsResponse>(
-    [ 'tx-log', router.query.id ],
+    [ QueryKeys.txLog, router.query.id ],
     async() => await fetch(`/api/transactions/${ router.query.id }/logs`),
     {
       enabled: Boolean(router.query.id),

ui/tx/TxRawTrace.tsx

@@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { RawTracesResponse } from 'types/api/rawTrace';
+import { QueryKeys } from 'types/client/queries';
 
 import useFetch from 'lib/hooks/useFetch';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
@@ -14,7 +15,7 @@ const TxRawTrace = () => {
   const fetch = useFetch();
 
   const { data, isLoading, isError } = useQuery<unknown, unknown, RawTracesResponse>(
-    [ 'tx-raw-trace', router.query.id ],
+    [ QueryKeys.txRawTrace, router.query.id ],
     async() => await fetch(`/api/transactions/${ router.query.id }/raw-trace`),
     {
       enabled: Boolean(router.query.id),

ui/tx/internals/TxInternalsListItem.tsx

@@ -35,7 +35,7 @@ const TxInternalsListItem = ({ type, from, to, value, success, error }: Props) =
         </Address>
       </Box>
       <HStack spacing={ 3 }>
-        <Text fontSize="sm" fontWeight={ 500 }>Value { appConfig.network.currency }</Text>
+        <Text fontSize="sm" fontWeight={ 500 }>Value { appConfig.network.currency.symbol }</Text>
         <Text fontSize="sm" variant="secondary">{ value }</Text>
       </HStack>
       { /* no gas limit in api yet */ }

ui/tx/internals/TxInternalsTable.tsx

@@ -29,7 +29,7 @@ const TxInternalsTable = ({ data, sort, onSortToggle }: Props) => {
             <Th width="16%" isNumeric>
               <Link display="flex" alignItems="center" justifyContent="flex-end" onClick={ onSortToggle('value') } columnGap={ 1 }>
                 { sort?.includes('value') && <Icon as={ arrowIcon } boxSize={ 4 } transform={ sortIconTransform }/> }
-                Value { appConfig.network.currency }
+                Value { appConfig.network.currency.symbol }
               </Link>
             </Th>
             { /* no gas limit in api yet */ }

ui/tx/state/TxStateListItem.tsx

 import { AccordionItem, AccordionButton, AccordionIcon, Button, Box, Flex, Text, Link, StatArrow, Stat, AccordionPanel } from '@chakra-ui/react';
+import capitalize from 'lodash/capitalize';
 import React from 'react';
 
 import type ArrayElement from 'types/utils/ArrayElement';
@@ -6,6 +7,7 @@ import type ArrayElement from 'types/utils/ArrayElement';
 import appConfig from 'configs/app/config';
 import type { data } from 'data/txState';
 import { nbsp } from 'lib/html-entities';
+import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
@@ -60,11 +62,11 @@ const TxStateListItem = ({ storage, address, miner, after, before, diff }: Props
             ) }
             <Flex rowGap={ 2 } flexDir="column" fontSize="sm" whiteSpace="pre" fontWeight={ 500 }>
               <Box>
-                <Text as="span">Miner </Text>
+                <Text as="span">{ capitalize(getNetworkValidatorTitle()) }</Text>
                 <Link>{ miner }</Link>
               </Box>
               <Box>
-                <Text as="span">Before { appConfig.network.currency } </Text>
+                <Text as="span">Before { appConfig.network.currency.symbol } </Text>
                 <Text as="span" variant="secondary">{ before.balance }</Text>
               </Box>
               { typeof before.nonce !== 'undefined' && (
@@ -74,7 +76,7 @@ const TxStateListItem = ({ storage, address, miner, after, before, diff }: Props
                 </Box>
               ) }
               <Box>
-                <Text as="span">After { appConfig.network.currency } </Text>
+                <Text as="span">After { appConfig.network.currency.symbol } </Text>
                 <Text as="span" variant="secondary">{ after.balance }</Text>
               </Box>
               { typeof after.nonce !== 'undefined' && (
@@ -83,7 +85,7 @@ const TxStateListItem = ({ storage, address, miner, after, before, diff }: Props
                   <Text as="span" fontWeight={ 600 }>{ nbsp }{ after.nonce }</Text>
                 </Box>
               ) }
-              <Text>State difference { appConfig.network.currency }</Text>
+              <Text>State difference { appConfig.network.currency.symbol }</Text>
               <Stat>
                 { diff }
                 <StatArrow ml={ 2 } type={ Number(diff) > 0 ? 'increase' : 'decrease' }/>

ui/tx/state/TxStateTable.tsx

@@ -6,10 +6,12 @@ import {
   Th,
   TableContainer,
 } from '@chakra-ui/react';
+import capitalize from 'lodash/capitalize';
 import React from 'react';
 
 import appConfig from 'configs/app/config';
 import { data } from 'data/txState';
+import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import TxStateTableItem from 'ui/tx/state/TxStateTableItem';
 
 const TxStateTable = () => {
@@ -20,10 +22,10 @@ const TxStateTable = () => {
           <Tr>
             <Th width="92px">Storage</Th>
             <Th width="146px">Address</Th>
-            <Th width="120px">Miner</Th>
-            <Th width="33%" isNumeric>{ `After ${ appConfig.network.currency }` }</Th>
-            <Th width="33%" isNumeric>{ `Before ${ appConfig.network.currency }` }</Th>
-            <Th width="33%" isNumeric>{ `State difference ${ appConfig.network.currency }` }</Th>
+            <Th width="120px">{ capitalize(getNetworkValidatorTitle()) }</Th>
+            <Th width="33%" isNumeric>{ `After ${ appConfig.network.currency.symbol }` }</Th>
+            <Th width="33%" isNumeric>{ `Before ${ appConfig.network.currency.symbol }` }</Th>
+            <Th width="33%" isNumeric>{ `State difference ${ appConfig.network.currency.symbol }` }</Th>
           </Tr>
         </Thead>
         <Tbody>

ui/txs/TxAdditionalInfo.tsx

@@ -34,7 +34,7 @@ const TxAdditionalInfo = ({ tx }: { tx: Transaction }) => {
         <Flex>
           <CurrencyValue
             value={ tx.fee.value }
-            currency={ appConfig.network.currency }
+            currency={ appConfig.network.currency.symbol }
             exchangeRate={ tx.exchange_rate }
             accuracyUsd={ 2 }
           />

ui/txs/TxsContent.tsx

-import { Box, HStack, Show } from '@chakra-ui/react';
-import React, { useCallback, useEffect, useState } from 'react';
+import { Alert, Box, HStack, Show, Button } from '@chakra-ui/react';
+import React, { useState, useCallback } from 'react';
 
-import type { TransactionsResponse } from 'types/api/transaction';
 import type { Sort } from 'types/client/txs-sort';
 
-import compareBns from 'lib/bigint/compareBns';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import FilterButton from 'ui/shared/FilterButton';
 import FilterInput from 'ui/shared/FilterInput';
 import Pagination from 'ui/shared/Pagination';
 import SortButton from 'ui/shared/SortButton';
 
-import TxsListItem from './TxsListItem';
-import TxsTable from './TxsTable';
+import TxsSkeletonDesktop from './TxsSkeletonDesktop';
+import TxsSkeletonMobile from './TxsSkeletonMobile';
+import TxsWithSort from './TxsWithSort';
+import useQueryWithPages from './useQueryWithPages';
 
 type Props = {
-  txs: TransactionsResponse['items'];
+  queryName: string;
   showDescription?: boolean;
-  showSortButton?: boolean;
+  stateFilter: 'validated' | 'pending';
 }
 
-const TxsContent = ({ showSortButton = true, showDescription = true, txs }: Props) => {
+const TxsContent = ({
+  showDescription,
+  queryName,
+  stateFilter,
+}: Props) => {
   const [ sorting, setSorting ] = useState<Sort>();
-  const [ sortedTxs, setSortedTxs ] = useState(txs);
 
-  // sorting should be preserved with pagination!
   const sort = useCallback((field: 'val' | 'fee') => () => {
     if (field === 'val') {
       setSorting((prevVal => {
@@ -47,26 +51,41 @@ const TxsContent = ({ showSortButton = true, showDescription = true, txs }: Prop
         return 'fee-desc';
       }));
     }
-  }, []);
+  }, [ setSorting ]);
 
-  useEffect(() => {
-    switch (sorting) {
-      case 'val-desc':
-        setSortedTxs([ ...txs ].sort((tx1, tx2) => compareBns(tx1.value, tx2.value)));
-        break;
-      case 'val-asc':
-        setSortedTxs([ ...txs ].sort((tx1, tx2) => compareBns(tx2.value, tx1.value)));
-        break;
-      case 'fee-desc':
-        setSortedTxs([ ...txs ].sort((tx1, tx2) => compareBns(tx1.fee.value, tx2.fee.value)));
-        break;
-      case 'fee-asc':
-        setSortedTxs([ ...txs ].sort((tx1, tx2) => compareBns(tx2.fee.value, tx1.fee.value)));
-        break;
-      default:
-        setSortedTxs(txs);
+  const {
+    data,
+    isLoading,
+    isError,
+    page,
+    onPrevPageClick,
+    onNextPageClick,
+    hasPagination,
+    resetPage,
+  } = useQueryWithPages(queryName, stateFilter);
+
+  const isMobile = useIsMobile(false);
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  const txs = data?.items;
+
+  if (!isLoading && !txs) {
+    return <Alert>There are no transactions.</Alert>;
+  }
+
+  let content = (
+    <>
+      <Show below="lg" ssr={ false }><TxsSkeletonMobile/></Show>
+      <Show above="lg" ssr={ false }><TxsSkeletonDesktop/></Show>
+    </>
+  );
+
+  if (!isLoading && txs) {
+    content = <TxsWithSort txs={ txs } sorting={ sorting } sort={ sort }/>;
   }
-  }, [ sorting, txs ]);
 
   return (
     <>
@@ -79,7 +98,7 @@ const TxsContent = ({ showSortButton = true, showDescription = true, txs }: Prop
           onClick={ () => {} }
           appliedFiltersNum={ 0 }
         />
-        { showSortButton && (
+        { isMobile && (
           <SortButton
             // eslint-disable-next-line react/jsx-no-bind
             handleSort={ () => {} }
@@ -95,10 +114,19 @@ const TxsContent = ({ showSortButton = true, showDescription = true, txs }: Prop
           placeholder="Search by addresses, hash, method..."
         />
       </HStack>
-      <Show below="lg"><Box>{ sortedTxs.map(tx => <TxsListItem tx={ tx } key={ tx.hash }/>) }</Box></Show>
-      <Show above="lg"><TxsTable txs={ sortedTxs } sort={ sort } sorting={ sorting }/></Show>
+      { content }
       <Box mx={{ base: 0, lg: 6 }} my={{ base: 6, lg: 3 }}>
-        <Pagination currentPage={ 1 }/>
+        { hasPagination ? (
+          <Pagination
+            currentPage={ page }
+            hasNextPage={ data?.next_page_params !== undefined && Object.keys(data?.next_page_params).length > 0 }
+            onNextPageClick={ onNextPageClick }
+            onPrevPageClick={ onPrevPageClick }
+          />
+        ) :
+          // temporary button, waiting for new pagination mockups
+          <Button onClick={ resetPage }>Reset</Button>
+        }
       </Box>
     </>
   );

ui/txs/TxsListItem.tsx

@@ -112,11 +112,11 @@ const TxsListItem = ({ tx }: {tx: Transaction}) => {
           </Address>
         </Flex>
         <Box mt={ 2 }>
-          <Text as="span">Value { appConfig.network.currency } </Text>
+          <Text as="span">Value { appConfig.network.currency.symbol } </Text>
           <Text as="span" variant="secondary">{ getValueWithUnit(tx.value).toFormat() }</Text>
         </Box>
         <Box mt={ 2 } mb={ 3 }>
-          <Text as="span">Fee { appConfig.network.currency } </Text>
+          <Text as="span">Fee { appConfig.network.currency.symbol } </Text>
           <Text as="span" variant="secondary">{ getValueWithUnit(tx.fee.value).toFormat() }</Text>
         </Box>
       </Box>

ui/txs/TxsPending.tsx

-import { Show, Alert } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
-import React from 'react';
-
-import type { TransactionsResponse } from 'types/api/transaction';
-
-import useFetch from 'lib/hooks/useFetch';
-import DataFetchAlert from 'ui/shared/DataFetchAlert';
-
-import TxsContent from './TxsContent';
-import TxsSkeletonDesktop from './TxsSkeletonDesktop';
-import TxsSkeletonMobile from './TxsSkeletonMobile';
-
-const TxsValidated = () => {
-  const fetch = useFetch();
-  const { data, isLoading, isError } =
-  useQuery<unknown, unknown, TransactionsResponse>([ 'transactions_pending' ], async() => fetch('/api/transactions/?filter=pending'));
-
-  if (isError) {
-    return <DataFetchAlert/>;
-  }
-
-  if (isLoading) {
-    return (
-      <>
-        <Show below="lg"><TxsSkeletonMobile isPending/></Show>
-        <Show above="lg"><TxsSkeletonDesktop isPending/></Show>
-      </>
-    );
-  }
-
-  if (!data || !data.items) {
-    return <Alert>There are no transactions.</Alert>;
-  }
-
-  return <TxsContent txs={ data.items } showDescription={ false }/>;
-};
-
-export default TxsValidated;

ui/txs/TxsSkeletonDesktop.tsx

-import { Skeleton, Flex } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import SkeletonTable from 'ui/shared/SkeletonTable';
 
-const TxsInternalsSkeletonDesktop = ({ isPending }: {isPending?: boolean}) => {
+const TxsInternalsSkeletonDesktop = () => {
   return (
-    <>
-      { !isPending && <Skeleton h={ 6 } w="100%" mb={ 12 }/> }
-      <Flex columnGap={ 3 } h={ 8 } mb={ 6 }>
-        <Skeleton w="78px"/>
-        <Skeleton w="360px"/>
-      </Flex>
+    <Box mb={ 8 }>
       <SkeletonTable columns={ [ '32px', '20%', '18%', '15%', '11%', '292px', '18%', '18%' ] }/>
-    </>
+    </Box>
   );
 };
 

ui/txs/TxsSkeletonMobile.tsx

 import { Skeleton, Flex, Box, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-const TxInternalsSkeletonMobile = ({ isPending }: {isPending?: boolean}) => {
+const TxInternalsSkeletonMobile = () => {
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (
-    <>
-      { !isPending && <Skeleton h={ 6 } w="100%" mb={ 12 }/> }
-      <Flex columnGap={ 3 } h={ 8 } mb={ 6 }>
-        <Skeleton w="36px" flexShrink={ 0 }/>
-        <Skeleton w="36px" flexShrink={ 0 }/>
-        <Skeleton w="100%"/>
-      </Flex>
     <Box>
       { Array.from(Array(2)).map((item, index) => (
         <Flex
@@ -38,7 +31,6 @@ const TxInternalsSkeletonMobile = ({ isPending }: {isPending?: boolean}) => {
         </Flex>
       )) }
     </Box>
-    </>
   );
 };
 

ui/txs/TxsTab.tsx

+import React from 'react';
+
+import { QueryKeys } from 'types/client/queries';
+
+import TxsContent from './TxsContent';
+
+type Props = {
+  tab: 'validated' | 'pending';
+}
+
+const TxsTab = ({ tab }: Props) => {
+  return (
+    <TxsContent
+      queryName={ tab === 'validated' ? QueryKeys.transactionsValidated : QueryKeys.transactionsPending }
+      showDescription={ tab === 'validated' }
+      stateFilter={ tab }
+    />
+  );
+};
+
+export default TxsTab;

ui/txs/TxsTable.tsx

@@ -33,14 +33,14 @@ const TxsTable = ({ txs, sort, sorting }: Props) => {
               <Link onClick={ sort('val') } display="flex" justifyContent="end">
                 { sorting === 'val-asc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(-90deg)"/> }
                 { sorting === 'val-desc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(90deg)"/> }
-                { `Value ${ appConfig.network.currency }` }
+                { `Value ${ appConfig.network.currency.symbol }` }
               </Link>
             </Th>
             <Th width="18%" isNumeric pr={ 5 }>
               <Link onClick={ sort('fee') } display="flex" justifyContent="end">
                 { sorting === 'fee-asc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(-90deg)"/> }
                 { sorting === 'fee-desc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(90deg)"/> }
-                { `Fee ${ appConfig.network.currency }` }
+                { `Fee ${ appConfig.network.currency.symbol }` }
               </Link>
             </Th>
           </Tr>

ui/txs/TxsTableItem.tsx

@@ -12,7 +12,6 @@ import {
   PopoverTrigger,
   PopoverContent,
   PopoverBody,
-  Portal,
   useColorModeValue,
   Show,
 } from '@chakra-ui/react';
@@ -40,7 +39,7 @@ const TxsTableItem = ({ tx }: {tx: Transaction}) => {
       <Tooltip label={ tx.from.implementation_name }>
         <Box display="flex"><AddressIcon hash={ tx.from.hash }/></Box>
       </Tooltip>
-      <AddressLink hash={ tx.from.hash } alias={ tx.from.name } fontWeight="500" ml={ 2 }/>
+      <AddressLink hash={ tx.from.hash } alias={ tx.from.name } fontWeight="500" ml={ 2 } truncation="constant"/>
     </Address>
   );
 
@@ -49,7 +48,7 @@ const TxsTableItem = ({ tx }: {tx: Transaction}) => {
       <Tooltip label={ tx.to.implementation_name }>
         <Box display="flex"><AddressIcon hash={ tx.to.hash }/></Box>
       </Tooltip>
-      <AddressLink hash={ tx.to.hash } alias={ tx.to.name } fontWeight="500" ml={ 2 }/>
+      <AddressLink hash={ tx.to.hash } alias={ tx.to.name } fontWeight="500" ml={ 2 } truncation="constant"/>
     </Address>
   );
 
@@ -57,19 +56,17 @@ const TxsTableItem = ({ tx }: {tx: Transaction}) => {
   return (
     <Tr>
       <Td pl={ 4 }>
-        <Popover placement="right-start" openDelay={ 300 }>
+        <Popover placement="right-start" openDelay={ 300 } isLazy>
           { ({ isOpen }) => (
             <>
               <PopoverTrigger>
                 <TxAdditionalInfoButton isOpen={ isOpen }/>
               </PopoverTrigger>
-              <Portal>
               <PopoverContent border="1px solid" borderColor={ infoBorderColor }>
                 <PopoverBody>
                   <TxAdditionalInfo tx={ tx }/>
                 </PopoverBody>
               </PopoverContent>
-              </Portal>
             </>
           ) }
         </Popover>
@@ -114,8 +111,7 @@ const TxsTableItem = ({ tx }: {tx: Transaction}) => {
       <Td>
         { tx.block && <Link href={ link('block', { id: tx.block.toString() }) }>{ tx.block }</Link> }
       </Td>
-      { /* TODO: fix "show" problem */ }
-      <Show above="xl">
+      <Show above="xl" ssr={ false }>
         <Td>
           { addressFrom }
         </Td>
@@ -126,7 +122,7 @@ const TxsTableItem = ({ tx }: {tx: Transaction}) => {
           { addressTo }
         </Td>
       </Show>
-      <Show below="xl">
+      <Show below="xl" ssr={ false }>
         <Td colSpan={ 3 }>
           <Box>
             { addressFrom }

ui/txs/TxsValidated.tsx

-import { Show, Alert } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
-import React from 'react';
-
-import type { TransactionsResponse } from 'types/api/transaction';
-
-import useFetch from 'lib/hooks/useFetch';
-import DataFetchAlert from 'ui/shared/DataFetchAlert';
-
-import TxsContent from './TxsContent';
-import TxsSkeletonDesktop from './TxsSkeletonDesktop';
-import TxsSkeletonMobile from './TxsSkeletonMobile';
-
-const TxsValidated = () => {
-  const fetch = useFetch();
-  const { data, isLoading, isError } =
-  useQuery<unknown, unknown, TransactionsResponse>([ 'transactions_validated' ], async() => fetch('/api/transactions/?filter=validated'));
-
-  if (isError) {
-    return <DataFetchAlert/>;
-  }
-
-  if (isLoading) {
-    return (
-      <>
-        <Show below="lg"><TxsSkeletonMobile/></Show>
-        <Show above="lg"><TxsSkeletonDesktop/></Show>
-      </>
-    );
-  }
-
-  if (!data || !data.items) {
-    return <Alert>There are no transactions.</Alert>;
-  }
-
-  return <TxsContent txs={ data.items }/>;
-};
-
-export default TxsValidated;

ui/txs/TxsWithSort.tsx

+import { Box, Show } from '@chakra-ui/react';
+import React, { useEffect, useState } from 'react';
+
+import type { TransactionsResponse } from 'types/api/transaction';
+import type { Sort } from 'types/client/txs-sort';
+
+import compareBns from 'lib/bigint/compareBns';
+
+import TxsListItem from './TxsListItem';
+import TxsTable from './TxsTable';
+
+type Props = {
+  txs: TransactionsResponse['items'];
+  sorting?: Sort;
+  sort: (field: 'val' | 'fee') => () => void;
+}
+
+const TxsWithSort = ({
+  txs,
+  sorting,
+  sort,
+}: Props) => {
+  const [ sortedTxs, setSortedTxs ] = useState(txs);
+
+  useEffect(() => {
+    switch (sorting) {
+      case 'val-desc':
+        setSortedTxs([ ...txs ].sort((tx1, tx2) => compareBns(tx1.value, tx2.value)));
+        break;
+      case 'val-asc':
+        setSortedTxs([ ...txs ].sort((tx1, tx2) => compareBns(tx2.value, tx1.value)));
+        break;
+      case 'fee-desc':
+        setSortedTxs([ ...txs ].sort((tx1, tx2) => compareBns(tx1.fee.value, tx2.fee.value)));
+        break;
+      case 'fee-asc':
+        setSortedTxs([ ...txs ].sort((tx1, tx2) => compareBns(tx2.fee.value, tx1.fee.value)));
+        break;
+      default:
+        setSortedTxs(txs);
+    }
+  }, [ sorting, txs ]);
+
+  return (
+    <>
+      <Show below="lg" ssr={ false }><Box>{ sortedTxs.map(tx => <TxsListItem tx={ tx } key={ tx.hash }/>) }</Box></Show>
+      <Show above="lg" ssr={ false }><TxsTable txs={ sortedTxs } sort={ sort } sorting={ sorting }/></Show>
+    </>
+  );
+
+};
+
+export default TxsWithSort;

ui/txs/useQueryWithPages.ts

+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { pick, omit } from 'lodash';
+import { useRouter } from 'next/router';
+import React, { useCallback } from 'react';
+import { animateScroll } from 'react-scroll';
+
+import type { TransactionsResponse } from 'types/api/transaction';
+
+import useFetch from 'lib/hooks/useFetch';
+
+const PAGINATION_FIELDS = [ 'block_number', 'index', 'items_count' ];
+
+export default function useQueryWithPages(queryName: string, filter: string) {
+  const queryClient = useQueryClient();
+  const router = useRouter();
+  const [ page, setPage ] = React.useState(1);
+  const currPageParams = pick(router.query, PAGINATION_FIELDS);
+  const [ pageParams, setPageParams ] = React.useState<Array<Partial<TransactionsResponse['next_page_params']>>>([ {} ]);
+  const fetch = useFetch();
+
+  const { data, isLoading, isError } = useQuery<unknown, unknown, TransactionsResponse>(
+    [ queryName, { page } ],
+    async() => {
+      const params: Array<string> = [];
+
+      Object.entries(currPageParams).forEach(([ key, val ]) => params.push(`${ key }=${ val }`));
+
+      return fetch(`/api/transactions?filter=${ filter }${ params.length ? '&' + params.join('&') : '' }`);
+    },
+    { staleTime: Infinity },
+  );
+
+  const onNextPageClick = useCallback(() => {
+    if (!data?.next_page_params) {
+      // we hide next page button if no next_page_params
+      return;
+    }
+    // api adds filters into next-page-params now
+    // later filters will be removed from response
+    const nextPageParams = pick(data.next_page_params, PAGINATION_FIELDS);
+    if (page >= pageParams.length && data?.next_page_params) {
+      setPageParams(prev => [ ...prev, nextPageParams ]);
+    }
+    const nextPageQuery = { ...router.query };
+    Object.entries(nextPageParams).forEach(([ key, val ]) => nextPageQuery[key] = val.toString());
+    router.push({ pathname: router.pathname, query: nextPageQuery }, undefined, { shallow: true });
+    animateScroll.scrollToTop({ duration: 0 });
+    setPage(prev => prev + 1);
+  }, [ data, page, pageParams, router ]);
+
+  const onPrevPageClick = useCallback(() => {
+    // returning to the first page
+    // we dont have pagination params for the first page
+    let nextPageQuery: typeof router.query;
+    if (page === 2) {
+      nextPageQuery = omit(router.query, PAGINATION_FIELDS);
+    } else {
+      const nextPageParams = { ...pageParams[page - 2] };
+      nextPageQuery = { ...router.query };
+      Object.entries(nextPageParams).forEach(([ key, val ]) => nextPageQuery[key] = val.toString());
+    }
+    router.query = nextPageQuery;
+    router.push({ pathname: router.pathname, query: nextPageQuery }, undefined, { shallow: true });
+    animateScroll.scrollToTop({ duration: 0 });
+    setPage(prev => prev - 1);
+  }, [ router, page, pageParams ]);
+
+  const resetPage = useCallback(() => {
+    queryClient.clear();
+    animateScroll.scrollToTop({ duration: 0 });
+    router.push({ pathname: router.pathname, query: omit(router.query, PAGINATION_FIELDS) }, undefined, { shallow: true });
+  }, [ router, queryClient ]);
+
+  // if there are pagination params on the initial page, we shouldn't show pagination
+  const hasPagination = !(page === 1 && Object.keys(currPageParams).length > 0);
+
+  return { data, isError, isLoading, page, onNextPageClick, onPrevPageClick, hasPagination, resetPage };
+}

ui/watchlist/AddressModal/AddressForm.tsx

@@ -11,6 +11,7 @@ import { useForm, Controller } from 'react-hook-form';
 
 import type { WatchlistErrors } from 'types/api/account';
 import type { TWatchlistItem } from 'types/client/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import getErrorMessage from 'lib/getErrorMessage';
 import type { ErrorType } from 'lib/hooks/useFetch';
@@ -106,7 +107,7 @@ const AddressForm: React.FC<Props> = ({ data, onClose, setAlertVisible }) => {
 
   const { mutate } = useMutation(updateWatchlist, {
     onSuccess: () => {
-      queryClient.refetchQueries([ 'watchlist' ]).then(() => {
+      queryClient.refetchQueries([ QueryKeys.watchlist ]).then(() => {
         onClose();
         setPending(false);
       });

ui/watchlist/AddressModal/AddressFormNotifications.tsx

@@ -8,7 +8,7 @@ import CheckboxInput from 'ui/shared/CheckboxInput';
 
 // does it depend on the network?
 const NOTIFICATIONS = [ 'native', 'ERC-20', 'ERC-721' ] as const;
-const NOTIFICATIONS_NAMES = [ appConfig.network.currency, 'ERC-20', 'ERC-721, ERC-1155 (NFT)' ];
+const NOTIFICATIONS_NAMES = [ appConfig.network.currency.symbol, 'ERC-20', 'ERC-721, ERC-1155 (NFT)' ];
 
 type Props<Inputs extends FieldValues> = {
   control: Control<Inputs>;

ui/watchlist/DeleteAddressModal.tsx

@@ -3,6 +3,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
 
 import type { TWatchlistItem, TWatchlist } from 'types/client/account';
+import { QueryKeys } from 'types/client/accountQueries';
 
 import useFetch from 'lib/hooks/useFetch';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -24,7 +25,7 @@ const DeleteAddressModal: React.FC<Props> = ({ isOpen, onClose, data }) => {
   }, [ data?.id, fetch ]);
 
   const onSuccess = useCallback(async() => {
-    queryClient.setQueryData([ 'watchlist' ], (prevData: TWatchlist | undefined) => {
+    queryClient.setQueryData([ QueryKeys.watchlist ], (prevData: TWatchlist | undefined) => {
       return prevData?.filter((item) => item.id !== data.id);
     });
   }, [ data, queryClient ]);

ui/watchlist/WatchlistTable/WatchListAddressItem.tsx

@@ -25,7 +25,7 @@ const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
       <HStack spacing={ 0 } fontSize="sm" h={ 6 } pl={ infoItemsPaddingLeft }>
         { appConfig.network.nativeTokenAddress &&
           <TokenLogo hash={ appConfig.network.nativeTokenAddress } name={ appConfig.network.name } boxSize={ 4 } mr="10px"/> }
-        <Text color={ mainTextColor }>{ `${ appConfig.network.currency } balance:${ nbsp }` + nativeBalance }</Text>
+        <Text color={ mainTextColor }>{ `${ appConfig.network.currency.symbol } balance:${ nbsp }` + nativeBalance }</Text>
         <Text variant="secondary">{ `${ nbsp }(${ nativeBalanceUSD })` }</Text>
       </HStack>
       { item.tokens_count && (